Fixing the main header

Hi there,

for the site header you can use this CSS:

.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

It works. Love it. Many thanks.

Glad to be of help

Using the sticky css you posted seems to cause the header to become semi-transparent on scroll.

Is there a way to prevent this?

Do you have a link Richard? You may want to raise a new topic so you can add your Site URL privately.

RE: Using the sticky css you posted seems to cause the header to become semi-transparent on scroll.

Actually on closer inspection it looks like a z-index issue with elements on the page. The header is opaque and the page elements float on top of sticky header on scroll.

The page is using Elementor Pro and Gravity Forms. Gravity Forms has same issue on standard WP page.

Update: Changing z-index of header fixed the issue.

Is this now resolved? Let me know. If not i really need to see the site to assist.

Hi David,
just found the same situation, by using a site with amazon links.
https://www.tipps-trick.de/top-10-invicta-uhren/
Regards, Tilo

Hi there,

i added a z-index property to the code here:

https://generatepress.com/forums/topic/fixing-the-main-header/#post-721652

1000 should be high enough. If it isnt then increase it until it works.

Hi David,
it works. Many thanks.
Tilo

Glad to be of help.

Yes, for my needs it is resolved (page elements are now behind the header vs on top with both Elementor and Gravity Forms). However if I use the slide out menu vs standard menu I have the same issue on the menu vs the header.

Thank you!

the slideout navigation has a really high z-index of 100001
I can't really asses the problem without seeing the site. can you share a link.

Fixed by making z-index of sticky header 100001 and slide out menu 999999.

Might not be the best option, but it's working for me.

Thank you!