Archived topic
Nav bar glitches (jumps up 1 px) when starting to scroll
7 replies · Started by Matthias on April 12, 2021
Hello, Tom and GeneratePress team!
On snapflux.com, the main nav bar jumps up and down 1 px when starting to scroll. The menu is configured as sticky and I tried removing all my custom CSS from the WordPress Customizer, Beaver Builder global and page settings, but the jumping glitch is still there.
I inspected the elements, but I couldn't find out why this glitch occurs. Any help would be greatly appreciated.
Feel free to poke around in the backend; I made a user account for you.
Hi there,
i am having trouble seeing the jump but what i can see that may cause an issue is the Navigation has a top border.
When the nav goes sticky it creates a placeholder clone, so the page doesn't shift up to fill the gap the nav would occupy. Try adding the border to the placeholder element as well by including its selector in your CSS:
#site-navigation, #sticky-navigation, #sticky-placeholder {
border-top: 3px solid #f60;
}This should ensure the placeholder is the same height as the nav.
Thanks for the quick reply, David. Good call, I hadn't thought of the placeholder. Unfortunately, the issue remains even with the amended CSS. I tried in Chrome and Firefox on Linux Mint 21, and our client first encountered the issue on their Windows machines as well. Here's a quick video:
Hmmm... can see the gap on Firefox - does this happen on a page where there are no animations or scroll elements ?
Hmmm, turns out it doesn't! The only 3 pages that have no animations are the 3 legal texts, like this one:
Incidentally, I just noticed I forgot to put the top-border on the nav bar on those 3 pages, so let's just pretend it was there ;-) But yeah, as you can see, no jumping glitch.
I think the issue is a conflict between the scroll event animations and the sticky navigation scripts.
As there is no transition on the sticky nav - would it be simpler just to use some CSS position Sticky on the element ?
You're right! That is an easy solution indeed. Just implemented it, looks great. Thanks for your quick help :-)
Glad to be of help
