My site’s menu works perfect on the desktop, but when I test it on my smartphone and my tablet I run into two issues.
When the menu loads it doesn’t touch and scroll. Instead the page behind the menu scrolls on both the tablet (only in portrait mode) and smartphone screen(only in landscape).
When I tap the menu in the portrait mode on my smartphone the menu doesn’t load at all unless I have both check boxes checked.(Menu fills page…, Disable scroll offset…) Even though it works in this situation, the menu that loads is a tiny sliver on the screen and really difficult to navigate unless I’m really careful.
Smartphone screen, portrait view. The menu loads into a tiny sliver and is scrollable, but you have to really delicate and not accidentally scroll and tap and go to another link url.
Tablet, portrait view. The menu loads, but I can’t scroll down the menu. The only movement that occurs when I push up or down occurs on the actual content page.
Hi @angierosie ! Thanks for your post, I am sorry to hear about the issues.
Could you update your post with some more information so we can help you faster? Things like your read-only link, and screenshots of the elements in question really speed things up.
Hi @angierosie, One reason why you’re unable to interact with the menu icon on mobile is because your content div has a z-index of 30 and the menu has a z-index of 0. Try setting your menu to be on top of your other elements.
This is a common area of trouble and I remember when I first learned about z-index - it helped me a ton! Many times when something isn’t working quite right - I’ll immediately take a peek and see if any elements are “blocking” anything.
Also, before you continue forward, please watch this intro series from start-to-finish: http://tutorials.webflow.com/
This will give you a quick refresher on site structure, design do’s and don’ts and responsive behavior in general. After you watch the entire series, try to rebuild your menu so it works on mobile.
If you still run into trouble, come back here and let us know and I’m happy to dive in and take a closer look with you!
I have the menu displaying on mobile now and it was working with finger scrolling in the tiny box (would there be a way to make it take over the screen?), but now when I try to finger scroll it stays stuck on one link. The link that appears in the menu also differs from page to page.
I’m scrubbing through your whole site as we speak. First thing, is there a reason for this left padding on the body? It’s making your site squished to the right.
edit: Now I notice that the big left area is meant for a left navigation. but I think you may need to redo the navigation from scratch to simplify the styles to get it working correctly.
With the navbar widget, many of the styles are already done for you so you don’t have to .
Also, you can make your navbar a symbol and place it on every page. That way, any changes you make to that symbol, it will be pushed across all other pages where it may be.
are you trying to slide the mobile menu in from the right? if so, you don’t have to touch anything in the styles panel to make the slide in work
I suggest deleting your old navbar, and dragging in a new one. then go to the mobile breakpoint and choose “Over right” for the menu type. let me know if this works
I’m ditching the old nav and creating a new one now.
How do I 1) stack the links like in the old navigation and 2) how to a push back the container to be responsive? on the mobile preview and my phone the nav is covering the entire page.
After looking deeper into the issue, I see where there may be some confusion. I was a bit confused myself when trying to find the solution. But I figured it out
