[Resolved] Sticky Header Behind Elements

Home Forums Support [Resolved] Sticky Header Behind Elements

Home Forums Support Sticky Header Behind Elements

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1622034

    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 πŸ˜‰

    Customer Support

    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 πŸ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.