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.

GeneratePress GenerateBlocks

Sticky header jump/bounce at scroll to top of page

  • Agent8
    July 6, 2023 at 8:28 am

    Hi,

    I’ve tweaked the spacing (padding/margin) on the header and sticky header and managed to produce a jump when the sticky disappears when you scroll to the top of the page.

    Can you point me in the right direction to remove the bounce effect as you hit the top of the page? I can’t work it out.

    Thanks,
    Nick.

  • Ying
    July 6, 2023 at 9:24 am

    Hi Nick,

    Would you consider using navigation as header option? It’s at customizer > header.

    Give it a try and let me know if that works for you 🙂

  • Agent8
    February 14, 2024 at 3:18 am

    Hi,

    I still need to resolve this issue.

    My header is using ‘navigation as header’. But on scrolling down and back up to the top of the page the removal of the sticky header and appearance of the normal header creates a not very slick vertical jump.

    I know I’ve edited spacing etc with the headers which must be introducing a difference in space as the sticky is removed.

    Scrolling with the mouse wheel you can see it. But its really pronounced if you drag the browser scroll bar up slowly.

    Thanks,
    Nick.

  • David
    February 14, 2024 at 6:29 am

    Hi there,

    if you make CSS modifications to the #site-navigation you also need to apply it to the #sticky-placeholder element which is a JS generated clone that gets inserted when the nav goes to sticky.

    For example:

    
#site-navigation, #sticky-placeholder {
    padding: 50px 60px 60px 60px;
}

    This will ensure the placeholder occupies the same space as the original nav.

  • Agent8
    February 14, 2024 at 6:54 am

    Hi David,

    Thanks. I’ve updated that and it fixed most of it. I found a separate instance of styling on the sticky giving it different padding which also needed tweaking.

    Cheers.

  • David
    February 14, 2024 at 7:21 am

    Yeah, any styling that would affect the height of that #site-navigation – like even a border line, can throw it out.

    Glad to be of help!

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