Hey guys, having an issue that seems to be isolated to one page on my site. When I open the following page on android devices I get a glitch where the menu flashes open and closed, or doesn’t respond… but it mainly just keeps closing. I’m not sure why, wondering if anyone can help?
It only happens on android and on the main page… when I click the hamburger/nav menu icon
Hi @mrcacaman, there is at least one styling issue that could be having an impact on mobile, and that is that there is overflow on the site, which happens when some elements go beyond the body viewport and the page scrolls from right to left in the designer, you can see this in the designer:
I would check all of your element styles to make sure that all elements stay 100% within the body. Overflow will cause whitespace on mobile, and may account for the need to use two fingers to try to pull the menu into view.
When I took a look, it seems the overflow starts on Tablet viewport, and looks to be caused by a h1 heading:
This seems to be happening due to the-65px margins, which create overflow, set those margins to 0px. I would recommend to not use negative margins or paddings, unless you account for overflow on the site.
You will also need to check this same “spread” class on mobile portrait as the h1 text has some strange spacing and also the font is overflowing, so you should reduce the font size to fit in the viewport.
When the overflow is fixed, then check the menu again on android after republishing the site. The issue should be either fixed or better, but the first step is to get rid of the overflow, it will always cause styling and rendering issues.
One more thing in @PixelGeek’s test with a new blank menu, the issue was not observed, but then there was no overflow on the page either, and on other pages of the site, like the home page, there was no overflow on that page.