[Resolved] STICKY HEADER NOT FULL WIDTH

[SEO]

Hi I am trying to replicate the same navigation of this website https://harmonyhealingnj.com/ if you try to scroll down you’ll notice that the sticky header is the same as the default header

But on my website which is built using generate press when I tried to check the “use navigation as header” it is not in full width, can you help me replicate this kind of header I can’t edit it using CSS

my website: https://rittune.wpengine.com/
reference website: https://harmonyhealingnj.com/

thanks

[David]

Hi there,

go to Customizer > Layout > Primary Navigation and temporarily change its Location to Below Header.
Then you can set the Container and Inner Container to Full Width. Once thats done, change the location back to float right.

[SEO]

if I do that the sticky logo would also be removed

[Ying]

No, the sticky logo won’t be removed.

[SEO]

Already applied but for some reason the sticky logo has been missing when scrolling down

[Leo]

With your current layout, add this CSS:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Then you should be able to disable the sticky navigation option in the customizer.

Let me know if this helps 🙂

[SEO]

Great this one would work

[Leo]

Awesome 🙂

[Author]

Posts