[Resolved] Hide Navigation Until Scroll on Single Posts Only

Home Forums Support [Resolved] Hide Navigation Until Scroll on Single Posts Only

Home Forums Support Hide Navigation Until Scroll on Single Posts Only

  • This topic has 6 replies, 2 voices, and was last updated 5 years ago by David.
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
    Staff
    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
    Staff
    Customer Support

    You’re welcome

    #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
    Staff
    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.