Mobile Menu Issue

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.

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.

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: Posting Guidelines for the Design Help Category

Thanks in advance! :slight_smile:

It’s updated now. Thanks, Dave!

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:

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! :slight_smile:

1 Like

Thanks, thewonglv.

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

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.

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.

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.

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 :slight_smile:

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.

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

  1. for the tablet view, set it back to position:auto



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

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

  1. set menu to full page height

and that should fix it :slight_smile:

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

1 Like

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!

1 Like

Glad it’s working for you :smile:

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