Mobile navigation bar NOT on top of entire page when menu button pressed on mobile vertical only

Hello,

When on mobile vertical view ONLY, and I click on the hamburger menu, the navigation doesn’t appear on top. Not sure why on this view only compared to the tablet view and even mobile horizontal. What am I doing wrong?

Thank you


Here is my site Read-Only: Webflow - Renovation Integrative Health

Hello! :slightly_smiling_face:

Z-index can be a total nightmare sometimes :see_no_evil:

This is being caused by the Container inside your Navbar - it’s set to Position static on all Breakpoints except Mobile, where it’s set to Relative w/ a Z-index of 2 (and is being inherited).

Changing this to z-index of 0 (or a negative value if needed) will fix your issue! :raised_hands::raised_hands::raised_hands:


Oh wow. Thank you. Definetely a step in the right direction. My problem now is that the hamburger disappears and can’t collapse it to get back to the main page. I tried setting the Menu button 2 div block to relative with z-index of 999 but it still hidden below. Again, this only happens in that mobile view.

Here is the share link: Webflow - Renovation Integrative Health

Hey @katvazquez , could you double check the share link? I am not able to access it. Would love to help out

Hi @katvazquez,

No problem! And sorry - overlooked that the hamburger menu was inside that container as well, so my solution above needs further work!

Unfortunately as Jose mentioned above, your share link is now throwing a 404 error and can no longer be accessed :slightly_frowning_face: I can definitely help further if you can get the share link working again​:muscle:

For sure. Here it goes.

https://preview.webflow.com/preview/renovation-integrative-health?utm_medium=preview_link&utm_source=dashboard&utm_content=renovation-integrative-health&preview=1687cd7c41a2a24531e1832ea3df699f&workflow=preview

Sorry. Try this one.

https://preview.webflow.com/preview/renovation-integrative-health?utm_medium=preview_link&utm_source=dashboard&utm_content=renovation-integrative-health&preview=e67a5d10a5abe0eccb535377f90e047b&workflow=preview

Thank you! That link works great :blush:

I’m still a bit puzzled this one as i’m still trying to learn about z-index/stacking context myself.

I feel like part of the issue here is that the ‘pre-built’ Navbar Element doesn’t seem to be designed to work with full-screen navbars since there is no exit button built in - hence your need to change the z-index of the hamburger menu.

I had a play around with implementing an exit button + interaction on your Navbar, instead of having to change the z-index of the Hamburger menu. But this relies on setting display: none on the Nav Menu which doesn’t seem to work as it usually does. (I assume this is probably done to avoid breaking the functionality of the prebuilt Navbar element? Or maybe i’m just doing something wrong.)

Hopefully somebody who’s a bit more experienced with Webflow can chime in with a solution, but my first thought here would be to re-do the Navbar from scratch so you have total control over the display settings, have more control over the placement of elements and then can use interactions to get a menu to show/hide. While this is a bit more of an effort, it’d give you way more flexibility and means you wouldn’t have to worry about z-index on individual elements - just on a single Div that will show/hide with a button press :muscle::muscle::muscle:

This is a great one you could use as a reference:

& Nelson also has a nice tutorial on something similar:

Thank you. I decided to re-do the navbar as all I wanted was the button to show along with the message in the Navbar. That worked out well.

Thanks again.

Not a problem! :slightly_smiling_face:

Glad to hear it’s all sorted :fist:

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