Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

1 Page Website Keep Top Nav Sticky

  • Is it possible with a one page website to keep the top menu sticky, even though the links are just ids on the page. How would I do that?

  • I’ve managed to get the sticky nav going, but how do I stop it covering up the heading of each section it takes me to? The section heading is hidden behind the nav.

    Also, it is possible to style the nav the same for the sticky menu as the normal menu? At the moment it transitions to a different look.

  • Ok, I’ve managed with the help of Chat GPT to get most of it done. Not sure it’s best practice, but the only thing I would like now is to make the menu, on scroll, on desktop, to be the same width as the non scrolling desktop menu.

  • Hi there,

    We can achieve this with just CSS if you want a simple sticky menu without any additional effects. If you have the Sticky Navigation feature enabled, please disable it first so I can work on the necessary CSS.

  • Thanks Alvind. I’ve done that.

  • Try this CSS:

    header#masthead {
      position: sticky;
      top: 0;
      z-index: 99;
    }
  • Hi Alvind,

    Still looks like it’s behind the menu or the id is not pulled up where the section title is. See video.

  • Hi there,

    its a bit of a hack, but try this CSS:

    
    h2[id] {
      padding-top: 104px;
      margin-top: -104px;
    }
    

    What it does is offsets the logical position of the H2 elements by the height of the sticks header.

  • Thanks David, that did the trick!

  • Glad to hear that!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.