Topic: Hide header on home page – but keep sticky

mrlennyman
February 22, 2024 at 3:57 pm

Hi there,

Is it possible to hide the regular header (.site-header) on a site, but then allow the sticky header to appear when scrolling?
Also would it be possible to change this page by page?

Cheers!
Ying
February 22, 2024 at 4:10 pm

Hi there,

It’s possible, you need to enable the sticky navigation.

Then we can use CSS to hide the regular header.
mrlennyman
February 22, 2024 at 5:11 pm

OK great – what Css hides it without disabling the sticky header?
Fernando
February 22, 2024 at 5:17 pm
Hi there,

You may enable the “Use Navigation as Header” in Appearance > Customize > Layout > Header, and then add this through Appearance > Customize > Additional CSS:
```
nav#site-navigation {
    display: none;
}
```
mrlennyman
February 22, 2024 at 5:50 pm

Excellent – thank you!
Fernando
February 22, 2024 at 5:51 pm

You’re welcome!

Viewing 6 posts - 1 through 6 (of 6 total)

Hide header on home page – but keep sticky