Archived topic
Sticky Header Behind Elements
6 replies · Started by Brian on January 17, 2021
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!
#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;
}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.
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 ;)
Perfect! (Kind of)
Would love to know why your header and navigation are being covered by something.
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 ;)
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 :)
