Archived topic
Sticky header is Jumpy
26 replies · Started by Titiana on March 23, 2021
I am trying to get the sticky header to stay still but it keeps jumping around like a wild child. My customer wants the header to stick, shrink and change color on scroll (the trifecta of header transitions lol)
I can get the sticky - the background color and the shrink but the menu does a small hop on the downward scroll and jumps around like a cat on a hot tin roof when you scroll back up. ( shows the white header under the sticky yellow header for a second then disappears)
Since I need the color change on scroll I can’t use the css provided in a previous post.
Is there another way to fix this issue?
VIDEO HERE: https://idesigntheweb.com/wp-content/uploads/2021/03/generate-press-navigation-jumpy.mp4
Thank you so much, Tanya
Hi there,
yeah - the sticky nav has its issues when transitioning from a larger site header to a sticky navigation.
For the smoothest transition we recommend using the Navigation as Header option in the Customizer > Layout > Site Header as this removes the site header container which is causing the jump.
Do you want to give that a try?
Hello David - someone is currently logged in at two locations using the login information I added to this post so I don't want to change anything if someone is currently editing something. Can you let me know when it is safe to edit?
Thank you,
Tanya
I logged both users out and removed the user. I turned on the navigation as header option but that removes my ability to reduce the size of the navigation after scroll.
Do you think the sticky navigation issues will be fixed anytime soon so they can be used properly?
Thank you,
Tanya
well heck lol. Using the "navigation as header" negates the navigation drop point and the alignment options for smaller screens.
Any chance you have the css handy to fix this :)
Would you be able to let me have a user login again :) And set the header back to how it was originally - the Header to Sticky Nav 'should' work in the majority of cases - so ill take a look at why its jumping around the place.
Hello David,
I have set the header back to the jumpy and re added the user account. Please let me know when you are done so that I can make adjustments to the site again.
Thank you so much for your assistance.
Tanya
Hi there,
From what I can see, the main issue is that the navigation is becoming sticky right away while the header is still visible.
For this kind of layout, it's better to use one of the sticky transitions like "Fade". It should display things much nicer.
Let us know :)
Hello Tom, I tried both fade, slide and normal - all jump. At the moment I have it set to fade so you can see what I mean. It is the best of the three
Tanya
Ah, I think I see the issue and it should actually be fixed in GP Premium 2.0.0.
Any chance you're able to try the beta version?: https://generatepress.com/introducing-the-gp-theme-builder/
Let me know :)
Unfortunately not with this build as it is about to be moved from DEV to LIVE but I will play with it once I get this one moved to live.
Is there a bandaid I can stick on this one until the new version comes out?
Try adding this CSS:
.main-navigation .menu-bar-item > a {
transition: line-height 300ms ease;
}This is fixed in the new 2.0 release on the first scroll down but it still does it when you scroll up and then back down again. Any chance you can give us some additional css to fix it until the version is released that fixes it on any additional up then back down again scroll events?
Hi John,
Can you share the device/OS and browser used where this occurs? (example: iPhone 8 - Safari, Samsung J7 - Chrome, Desktop/Windows - Chrome)
And perhaps a screen-recording as well? Let us know. Thanks. :D
https://libertycountyfl.org
It does it in Chrome desktop, Firefox desktop and Edge desktop
See video linked below.
https://www.dropbox.com/s/zytcgaz48o7jcun/Jumpy-GP.wmv?dl=0
I have over 350 other websites I can show you too, this is only one of them. They all do it. I've accepted it for now, the above fix was certainly great because now it doesn't do it on the initial scroll so I am super grateful for that fix. It would just be awesome if we could figure out the additional scroll back down events as well. Thanks again! As always, we LOVE GP!!!
