Copy link to clipboard
Copied
Hello,
With Muse 2018.0, I have created a website that includes a Hamburger Akkordion menu in the mobile screens. I uploaded the site to BC for a trial.
https://timmich.businesscatalyst.com/profil.html
On the following smartphones, the hamburger menu button (png) is unfortunately not visible:
Iphone 5 - iOS version 11.4. - Safari
Iphone 6 - iOS version 11.4. - Safari
On the following smartphones, the hamburger menu button is displayed as desired:
Iphone 4 - iOS version 8.4. - Safari
Iphone 5 - iOS Version 10.2.1. - Safari
Iphone 7 - iOS version 10.1. - Safari
Also the preview of the mobile versions shows as desired the menu button (png).
The menu is in Muse on the master page at the top level.
Can somebody help me please?
Thanks in advance, Patrick
There are many pinning issues on this page. Additionally there are issues regarding elements, which overlap the breakpoont boundaries especially in the bigger breakpoints.
As Uwe already said: The 320 px breakpoint is unnecessary and counterproductive: If the smallest breakpoint is the same as the minimal page width – what do you expect to happen? The page can’t be smaller than this breakpoint defines, responsive behaviour therefore isn’t possible.
But answering your initial question regarding th
...Copy link to clipboard
Copied
I assume your widget is set to pin [to right browser] because there is something out side the canvas and that mucks up the design... also it is not just phones and I can make the same error on a desktop with FF
Copy link to clipboard
Copied
Thank you for your attention.
The accordion menu widget set is pinned to the left ...
is that a porblem?
I can‘t see something, that is outside the canvas?
Patrick
Copy link to clipboard
Copied
Also the breakpoint at 320 is not necessary and disturbs the whole thing as well.
320 coulbe deleted and will get replaced automatically as the minimum width.
Pinning to the left also should be avoided as any pinning should be avoided for mobile devices anyway.
Did you place any anchors?
Best Regards,
Uwe
Copy link to clipboard
Copied
Thanks Uwe.
It has been my experience that sometimes the contents of the breakpoint at 375px in 320px display are not optimally placed. I will check deleting the 320 breakpoint.
Pinning: Mobile devices are every other than desktop, right?
Yes, I've used anchor points - it's the anchor points that come from the desktop version. shall I delete them?
Copy link to clipboard
Copied
I would not delete the anchors, it is "unfortunately" not pssible to hide breakpoints in breakpoint, I guess.
You could try to center those anchors instead of placing them elsewhere.
As far as I have in mind and I`m sure Ussnorway​ and Günter Heißenbüttel​ could make this clear again at this point,
anchors for mobiles should be placed centered or should they be placed as for desktop on the left hand side?
BTW, without wanting to corrupt this thread, I have the same movement on my new (www.fotografie-roeder.de) website and I also have no content outside and tried both, anchors on the left hand side and centered.
Going back to you, I also realize that text elements on mobile breakpoints do not resize in width which is recommended for fluid width breakpoints. Like this, parts from text are getting cropped.
For 320 breakpoint: Normally one uses breakpoints from that "point" when the design "breaks".
Using the scrubber, keeping an eye on the borders of the page, one can/must decide, when to add a breakpoint.
As there are no smaller devices than 320 there´s no breakpoint necessary or even helpfull.
Best Regards,
Uwe
Copy link to clipboard
Copied
No solution possible without the .muse file.
But please, give us a small, reduced file with only one page, a few elements and only a few breakpoints (not these 9 ones of your actual page).
Copy link to clipboard
Copied
Hello Günter,
here is the reduced .muse file.
Do you need something else?
Thanks, Patrick
Copy link to clipboard
Copied
There are many pinning issues on this page. Additionally there are issues regarding elements, which overlap the breakpoont boundaries especially in the bigger breakpoints.
As Uwe already said: The 320 px breakpoint is unnecessary and counterproductive: If the smallest breakpoint is the same as the minimal page width – what do you expect to happen? The page can’t be smaller than this breakpoint defines, responsive behaviour therefore isn’t possible.
But answering your initial question regarding the disappearing hamburger icon:
The menu text box within the accordion’s target area is set to fixed width, what conflicts with the responsive behaviour of the accordion. Set it to responsive width in every breakpoint and the issue is fixed.
As I see, you are using an outdated version of Muse. I’d recommend to update to the newest version.
Copy link to clipboard
Copied
https://forums.adobe.com/people/G%C3%BCnter+Hei%C3%9Fenb%C3%BCttel schrieb
...
But answering your initial question regarding the disappearing hamburger icon:
The menu text box within the accordion’s target area is set to fixed width, what conflicts with the responsive behaviour of the accordion. Set it to responsive width in every breakpoint and the issue is fixed.
...
Thanks Günter, now it works!