Hide Navigation Until Scroll on Single Posts Only

[jhmattern]

I’m gearing up to move my three more complex sites over to GeneratePress, and I need to sort out a way to treat single post headers differently before I start the move.

On most of the site, the header will appear as it does on the homepage: https://nakedpr.com — display on page load, and be sticky on scrolling.

But single post pages were designed to be much more minimalist. They need to load with no header at first, like https://nakedpr.com/pitching-bloggers/. Then, on scroll, the header should appear (the same sticky header that would appear when scrolling on regular pages).

Is there any way to do this with GeneratePress?

Thanks!

[David Customer Support]

Hi there,

Enable the Customizer > Layout > Sticky Navigation then this CSS:

body:not(.home) #site-navigation:not(.navigation-stick) {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

body:not(.home) #sticky-placeholder {
    display: none !important;
}

Original Doc: https://docs.generatepress.com/article/show-sticky-navigation-only/

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

[jhmattern]

Wonderful. Now that I know this can be done, I’ll start switching that site over today and will let you know if I run into any trouble getting this to work.

Thank you!

[David Customer Support]

You’re welcome

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

[jhmattern]

The site’s in maintenance mode so not visible publicly now, but this code doesn’t work unfortunately.

It’s only showing the header on the homepage. I need every page to show the header normally and only single post pages to hide it until scroll.

Even when it’s hidden though, it’s still leaving the logo there, which I also need hidden — the whole header area on single post pages until they scroll so it’s minimalist and entirely focused on the article.

Any option that might be able to handle this?

[jhmattern]

OK. I think I figured it out. If anyone else ever wants to do similar, I changed “.home” to “.page” to make sure the normal header showed on all pages but not posts. And I added .site-logo to the hidden elements.

Thanks for your help!

[David Customer Support]

Glad to hear you got it resolved 🙂

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

[Author]

Posts