Highlighted

Menue button element is not visible on some mobile devices

Participant ,
Jun 15, 2018

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

IMG_1780.PNG

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

IMG_2854.PNG

Also the preview of the mobile versions shows as desired the menu button (png).

Bildschirmfoto 2018-06-15 um 14.08.15.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 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.

Views

533

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Menue button element is not visible on some mobile devices

Participant ,
Jun 15, 2018

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

IMG_1780.PNG

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

IMG_2854.PNG

Also the preview of the mobile versions shows as desired the menu button (png).

Bildschirmfoto 2018-06-15 um 14.08.15.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 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.

Views

534

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 15, 2018 0
Most Valuable Participant ,
Jun 15, 2018

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

Screenshot (962).png

Screenshot (963).png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 15, 2018 0
Participant ,
Jun 18, 2018

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

Bildschirmfoto 2018-06-15 um 20.14.23.png

Bildschirmfoto 2018-06-18 um 12.48.24.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2018 0
Adobe Community Professional ,
Jun 18, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2018 0
Participant ,
Jun 18, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2018 0
Adobe Community Professional ,
Jun 18, 2018

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.

Bildschirmfoto 2018-06-18 um 14.00.16.png

Bildschirmfoto 2018-06-18 um 14.00.24.png

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2018 0
LEGEND ,
Jun 18, 2018

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).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2018 0
Participant ,
Jun 18, 2018

Copy link to clipboard

Copied

Hello Günter,

here is the reduced .muse file.
Do you need something else?

Adobe Creative Cloud

Thanks, Patrick

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2018 0
LEGEND ,
Jun 19, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 19, 2018 1
Participant ,
Jun 22, 2018

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 22, 2018 0