[Resolved] Hide Navigation Until Scroll on Single Posts Only

Home Forums Support Hide Navigation Until Scroll on Single Posts Only

This topic contains 6 replies, has 2 voices, and was last updated by  David 3 weeks, 3 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1142399

    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!

    #1142748

    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/

    #1142769

    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!

    #1142814

    David Customer Support
    #1143339

    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?

    #1143380

    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!

    #1143481

    David Customer Support

    Glad to hear you got it resolved 🙂

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

You must be logged in to reply to this topic.