[Resolved] Sticky nav “jumping” upon scroll

Home Forums Support Sticky nav “jumping” upon scroll

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1347585
    oceansurf99

    Hi there,

    I just set up a sticky nav on my site which “jumps” a bit when initially scrolling the page.

    I’m using a MacBook Pro with Safari 13.1.1 (latest) on Mac OS 10.15.5 (latest).

    It appears that some CSS classes are being changed when the scroll occurs. This slight delay might be what is causing it, but I’m not sure.

    The settings I’m using in the Customizer are:
    – Customizing ▸ Layout ▸ Header: Use Navigation as Header is checked
    – Customizing ▸ Layout ▸ Header: Mobile Header is Off
    – Customizing ▸ Layout ▸ Sticky Navigation is On
    – Customizing ▸ Layout ▸ Sticky Navigation: Transition is None
    Pretty basic setup.

    I made a couple of screencasts <removed> so you can see what I’m talking about, one showing the action of the navbar when trying to scroll, the other showing the CSS classes changing as the page is scrolled.

    Is there any way way to fix this? Unfortunately, I won’t be able to use the theme like this; it is a small detail, but noticeable enough, and undesirable.

    Please help.

    #1347742
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question so we can check out the issue?

    We haven’t had other reports on this so videos don’t help much.

    Please disable all plugins except GP Premium as well.

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #1348618
    oceansurf99

    I disabled all the plugins other than GP Premium and it is still happening.

    I updated the original post with the URL.

    #1348684
    Leo
    Staff
    Customer Support

    I’m on Windows and tested with Chrome and Firefox without any issues:
    https://www.screencast.com/t/Czm6TZYr8

    Does it happen with every browser for you? Can you try browser incognito mode?

    #1348685
    oceansurf99

    This is happening on Mac OS, both Safari and Chrome.
    Which is why I posted the videos.

    #1348776
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I believe what you’re seeing is the javascript kicking it and fixing the navigation to the top of your screen. Most sticky-element solutions will have the same tiny effect if you play with it enough.

    One thing you can try is setting the navigation to position: sticky:

    #site-navigation {
        position: sticky;
        top: 0;
    }

    This will try to leverage browser sticky functionality until the javascript kicks in.

    Another option is to use the fade or slide effects.

    #1348796
    oceansurf99

    Yeah, that fixed it.
    Thanks.

    #1348817
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.