Streaming live at 10am (PST)

Mobile Menu Issue


#1

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.

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

https://preview.webflow.com/preview/os-voices?preview=e231e45117acb5e3d0ab93d47d78ee15

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.

Smartphone screen, landscape view. The menu loads, but the menu is push and pull scrollable.

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.

Also, only on the home page the logo and menu follows along down the page when scrolling.


#2

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.

Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! smile
Cheers,
Dave


#3

It's updated now. Thanks, Dave!


#4

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! smile


#5

Thanks, thewonglv.

I'm playing around with all the z indexs and now my menu isn't showing at all on my phone.


#6

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.




Even though I have the menu showing on all devices, it doesn't display on my ipad.


#7

Hi @angierosie

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.


#8

Is there a video tutorial on how to make a sidebar nav like we're trying to archive? All I've found is the drag and drop nav in the tutorials.


#9

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 smile

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 smile


#10

THanks for that tip, pixelgeek.

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.


#11

1)
a. remove the float right from the nav container
b. set the display for each nav link to block

2) for the tablet view, set it back to position:auto

smile


#12

Thanks!

Now my mobile menu isn't working on my iphone, but it is on my tablet.


#13

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 smile

1) set your z-index to 1001

2) set menu to full page height

and that should fix it smile

​Try these steps and let me know if you're successful.


#14

It worked! Thanks so much for your help smile

I'll let you know if I run into anymore issues. It looks like everything is finally starting to work!


#15

Glad it's working for you smile


#17

I moved a post to a new topic: How to make a sticky menu


#18