[Resolved] Sticky nav “jumping” upon scroll

[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.

[Leo]

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 🙂

[oceansurf99]

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

I updated the original post with the URL.

[Leo]

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?

[oceansurf99]

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

[Tom]

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.

[oceansurf99]

Yeah, that fixed it.
Thanks.

[Tom]

You’re welcome 🙂

[Author]

Posts