On mobile breakpoints of my website I have added an hamburger menu using the lightbox widget. I am experiencing troubles with chrome on android. When I lunch the preview mode online (or the entire site) the trigger box is placed beyond the page width borders. This affects also the navy menu that does not remain pinned to the top of the browser when scrolling. On iOS all works fine.
How could I solve it?
No link to have a look at the site? You may publish a free temporary site on businesscatalyst using the „Publish“ menu top right of Muse‘s application window.
I think, on iPhone/iPad all is working correctly only at first glance. If you swipe on the screen, you see the background shifting.
There are elements bleeding outside the breakpoint width – for example the first page wide spanning image.
Look at this very(!) small screencast:
To fix this, please read my answer #8 here: https://forums.adobe.com/thread/2377071
Sorry Gunter but i don't get your point.
The background is shifitng just because you have passed from a Bpoint to another and i have set different sizes for the
What i see on chrome (mobile device) when i refresh the home page (for example) is this screen:
As you can see the ham menu trigger is outside the border page. I have to swipe to the right to find it. If i zoom out here is the screen:
If i scroll down now the nav menù stays on top as it should be.
On the other hand scrolling down without zooming out first, the nav menù doesn't stay pinned on the top of the browser.
If you read my link above and follow the instructions, you‘ll see:
No element st no time is allowed to be outside the breakpoint width. And you undoubtedly have such element on your page. Of course you issue may be caused by these bleeding elements.
Differnet mobile browsers react differently on such issues. So please fix this and look, what happens.
Additionally: Please post screenshot directly into you thread. Your Google hosted screenshots require a sign up/sign in.
Sorry Gunter but i'm quite sure that i don't have any elements put ouside the page borders.
The background for istance is just the fill of a full browser width rectangle. Really i don't undestrand what i should look for
in my project.
I am sure, you have.
Please share your site with us using Dropbox, CC Files, or a similar file sharing service. Very important: Only one page, only a few elements to demonstrate your issue. If you don‘t do this, we have to do this while checking the file, and additionally have to bare long download times.
Ok, I had a look at your file. It is very hard to check, because you are using web font, which I don’t have and inconsequence the layout gets scrambled all over – even if I temporarily replace the web fonts by standard fonts with fallback.
You are completely right: The image, I supposed to bleed outside the breakpoint, was not a placed, but a fill image and the number bottom right of this image simply gets clipped, when the browser window is resized, because it is set to „Scale to Fill“. So, no misplaced elements!
I suppose, you issue is related to a bug, which is already fixed in latest prerelease version. When I check you file in this version, I can’t see the shifting errors any more.
In your file, I can see some small issues, which however aren’t related to you main problem:
Please do the following to check, if I am right:
Sign in to „Adobe Prerelease“: https://www.adobeprerelease.com and the Adobe Muse Prerelease Program and load the actual prerelease version of Muse. This version installs alongside your existing Muse version and won’t interfere with it in any way. Keep a backup of your actual file and check your site. I think, the issues, you are encountering, aren’t present any more.
Thank you so much, now all it's allright!
Do you know when will this version be released ?
I hope, soon!
Serious: Like most other software companies, Adobe and the Muse team never announce a release date.
And again: Be aware, that a .muse file, once saved in prerelease version, wont open on former Muse versions. So: Keep a backup!