My new menu design looks and works great on desktop, but on mobile and tablet devices I’m running into a couple of major issues;
The longer submenus don’t scroll and stay fixed, so that you can’t see the submenu tabs at the bottoms. I just can’t get the scroll to work.
It seems like you can see and interact with elements underneath the mobile menu - like they’re behind other elements, but changing the z-index value doesn’t fix this.
Any help would be appreciated with these. Read-only link is below. Thank you!
For mobile menu scrolling and z-index issues, here are some common solutions:
The overflow settings on your container elements can affect how your mobile menu behaves. Check the overflow settings in your container elements and ensure they’re set to “visible” or “auto” as needed. You can find these settings in the Style panel under Layout settings.
For z-index conflicts, ensure your mobile menu has a higher z-index than other page elements. You can adjust this in the Style panel under Position settings. A z-index value of 999 or higher usually works well for mobile menus.
Also verify that your mobile menu container has its Position set to “Fixed” or “Absolute” depending on your design needs, as this affects how the menu layers above other content.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
You have two navs and your mobile nav setup is quite dense, however you can somewhat solve this by fixing the scrolling like this- note the scrollbar I’ve added to your mobile menu below. It will be more readable if you give the toggle ( “Products” ) a different background color than the expanded scrollable content area.
To do that, in your mobile specific nav find the class navmenu_dropdown-left and at the tablet breakpoint give it a Max height of something like 600px, and an overflow-y of auto.
You’ll then shrink that height on lower breakpoints so it fits, maybe 350px for landscape, 500px for portrait?
Set the submenu wrapper to overflow: auto with a fixed height in your mobile breakpoint , that’ll force scrolling. For the layering, give the menu a fixed position and a z-index higher than any page sections (I usually set 9999). Had this exact issue on a client’s dropdown-heavy nav.
Thank you. The other replies weren’t looking at the right mobile menu - I’ve been playing around with two different ones but one was hidden. I’ve removed the hidden one to minimize confusion. The menu I’m having trouble with is the current one.
When I set the submenu to overflow: auto with a fixed height in my mobile breakpoint, it reverts to the desktop version of the menu.
For whatever reason, the z-index will revert back to 1 when I click away and then click back to that element, when I set it to 9999.
I can do a separate mobile menu, but since several people of varying expertise may make changes to it over time, I’m trying to keep it simple. Thank you!
