Ads & plugins appearing over sticky header

Hi there,

try adding this CSS to increase the sticky nav / mobile headers z-index:

#mobile-header,
.sticky-enabled .main-navigation.is_stuck {
    z-index: 1000000 !important;
}

Thanks David - it was happening on desktop as well, but it seems my desktop header is no longer sticky, so I can't show an example of it.

So:
- How could I make the header "sticky" again on desktop?
- How should I modify the code so that it applies to all devices (desktop, tablet, mobile)

Thanks!

In Customizer > Layout > Sticky Navigation, make sure that is enabled and set it to Desktop only as your Mobile Header is enabled and already sticky..

The CSS i provided covers the desktop and mobile sticky.

Thanks David, I tried that earlier, but the header actually changes significantly.

Is there a way to keep it sticky and retain exactly how it appears when you first land on the page? Same height, spacing, etc.

Disable the Sticky Nav.
Keep the CSS i provided earlier.
And add this CSS:

@media(min-width: 769px) {
    .site-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000000;
    }
}

It seems to be working on mobile & tablet, but not desktop.

And now the header does not appear on mobile for the first 3-5 seconds (there's a delay before it appears).

It looks fine to me on Desktop.
Mobile issues - i don't see a delay in the header appearing, but I do see an issue with the mobile menu opening and that is due to some Javascript optimizations on the site thats deferring the scripts until user interaction. Might want to check with the optimization plugin author on that.

I've tried it on 4 different devices (all running Chrome) - and the issue still appears: https://pasteboard.co/gphJlCjCE1rl.png

Noted on the optimization plugin

I made a change to this CSS:

https://generatepress.com/forums/topic/ads-plugins-appearing-over-sticky-header/#post-2055512

Update your CSS to match, that should fix it.

Thanks David, that worked perfectly!

Appreciate you driving this home, really happy with the support I've received :).

Awesome - glad to be of help!

This worked really (maybe too well :D)!

Is it possible to have the sticky header appear only when people scroll up (as opposed to always sticky / always visible)?

Thanks!

Not using the CSS method, you would need to remove the CSS i provided and then re-enable the Themes sticky options.... we can the relook at the original issue.