[Resolved] Sticky Header Behind Elements

[Brian]

Hello,
I have recently migrated my client’s site to GP (they started with another theme, which was a disaster, so I’ve convinced them to switch to your amazing theme!). I have a few lingering problems. This one is that the sticky nav/header I have is hiding behind elements and thus isn’t clickable on desktop only. I’m not sure why I have it working on mobile, but figure there is an easy fix for this I’m not seeing.
The site is mikava.coffee.
Thanks in advance for your help!

[Bryan]

#generate-slideout-menu {
    z-index: 100001;
}

It looks as if something is overriding this code. I don’t know what it is, but as a temporary fix, you could try adding it back in as additional CSS with the code below until someone else can figure it out.

#generate-slideout-menu {
    z-index: 100001 !important;
}

[Brian]

I think this was the reply to my other ticket (which worked great). The issue here remains. This is that the entire header is hiding behind page elements so that I can’t click on any of it (cart, menu, logo to home). This is on desktop only.

[Brian]

I found the id necessary to adjust the z-index here, so problem solved 🙂
For anyone who finds this thread, I added this to my custom CSS:
.sticky-enabled .main-navigation.is_stuck {
z-index: 10000 !important;
}

For some reason, 1000 wasn’t enough 😉

[Bryan]

Perfect! (Kind of)

Would love to know why your header and navigation are being covered by something.

[Brian]

Me too! I think it must have something to do with Elementor (I had a similar problem on my own site, and also needed custom CSS to bring the sticky header out). Some day I’ll discover it 😉

[David]

Hi there,

in this case the Elementor column containing the animated ‘DISTINCTIVE COFFEE…’ text has a z-index of 1000. Hence you needed the sticky navs z-index to be a lot higher. This happens when an element is fixed ( like the sticky nav ) it no longer maintains its relative position in the DOM, so elements coming after it can sit in front of it… likewise animated elements can also jump out of their relative z-index position to cause all sorts of havoc….

Glad you found the solution and thanks Bryan for helping out 🙂

[Author]

Posts