Streaming live at 10am (PST)

Mobile Menu with Fixed Position


#1

Help! I have a mobile menu with position: fixed.
It has a z-index of 500 and works fine bar it will not stack on top of another element.
The other element is a logo that's set with position:relative.
I've tried making the logo position: auto, rwlative, etc... it makes no difference.... it simply will not position over this element. any ideas what's going on?

here's a preview link:
If you enter the site and test the mobile menu using the hamburger, you'll see what I mean.


#2

See here, there's a z-index: 1 set on .w-nav-overlay (a webflow class) - when I remove this, it solves the problem. You can override these in the page settings with custom code. Couldn't tell you exactly what's going on though.


#3

Hi Joe, Yes I see what you mean.
It's a Webflow class that I have no control over though?? How do you suggest I override this using custom code?
Call the class involved and remove the z-index?


#4
<style>
.w-nav-overlay {
   z-index: auto / initial / #;
}
</style>

You'll have to trial and error until you find what works.


#5

Thanks v much Joe, I got it sorted by setting the z-index to auto using the custom code.
Really appreciate the help.


#6