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?
Here is my site Read-Only: Webflow - Renovation Integrative Health
Z-index can be a total nightmare sometimes
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!
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
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 I can definitely help further if you can get the share link working again:muscle:
Thank you! That link works great
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
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.
Not a problem!
Glad to hear it’s all sorted
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.