Mobile Navbar Glitching

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


Here is my site Read-Only: https://preview.webflow.com/preview/aston-6f9c33?preview=4f5ef7423f835ba3b95776684a10039f

This is the page it happens on: http://astoncomms.com.au/old-home

Hi @mrcacaman

Thanks so much for posting about this and apologies for the delay!

This is definitely strange. We are investigating this now and hope to have a solution soon.

I’ll post back here with an update, or if I have additional questions regarding this issue.

​Thanks in advance for your patience and help investigating this.

Thanks so much, yep I’ve been stuck on it for a while and client isn’t too
happy

Matt Iuliano
-DIRECTOR-
M A J E S T I Q P R O D U C T I O N S

[+61] 449 640 455
CINEMATOGRAPHY | VIDEO PRODUCTION | COLOUR GRADING | EDIT | SOUND & MUSIC |
DESIGN | FASHION | WRITING | FILM MAKING

Hi there. I’m still working through this issue for you.

so far i’ve made a duplicate of your site on my account and removed all elements and placed a new un-styled, navbar component and it works on Android:
http://aston-6f9c33-c0ed2053c5e31eab94e66dc31e.webflow.io/old-home

however on your about-us page, if you set the navbar to open as a dropdown, it works fine:
http://aston-6f9c33-c0ed2053c5e31eab94e66dc31e.webflow.io/about-us

when i have more updates, I’ll post here

1 Like

Thanks Nelson, appreciate it! It was happening on Samsung Galaxy’s

while I’m working through this, I do see that having the menu open as a dropdown instead of over right works.

have you tried that yet?

I haven’t, if that’s a fix that’s cool we can just do that

try that and let me know how it goes :slight_smile:

Will get them to test now

1 Like

They are still having issues. It looks like the tabs in the menu that drop
down are too high and he has to use two fingers to keep it open and
navigate to the page
It’s so weird

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:

https://cl.ly/141M201P2c2t/Screen%20Recording%202017-11-24%20at%2011.42%20PM.mov

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.

https://cl.ly/3m081s1o3B0h/Image%202017-11-24%20at%2011.49.56%20PM.png

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.

I hope this helps.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.