Sticky header is Jumpy – GeneratePress

This topic has 26 replies, 7 voices, and was last updated 3 years, 11 months ago by David.

Viewing 15 posts - 1 through 15 (of 27 total)

1 2 →

Author

Posts
March 23, 2021 at 6:43 pm #1707275

Titiana

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

March 24, 2021 at 3:07 am #1707603

David
Staff
Customer Support

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?

March 24, 2021 at 1:53 pm #1708618

Titiana

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

March 24, 2021 at 11:05 pm #1708877

Titiana

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

March 24, 2021 at 11:20 pm #1708885

Titiana

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 🙂

March 25, 2021 at 1:52 am #1709025

David
Staff
Customer Support

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.

March 26, 2021 at 7:44 pm #1711438

Titiana

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

March 27, 2021 at 10:43 am #1712307

Tom
Lead Developer
Lead Developer

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 🙂

March 27, 2021 at 3:42 pm #1712440

Titiana

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

March 28, 2021 at 10:21 am #1713128

Tom
Lead Developer
Lead Developer

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 🙂

March 29, 2021 at 12:45 pm #1714578

Titiana

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?

March 30, 2021 at 8:05 am #1715565
Tom
Lead Developer
Lead Developer
Try adding this CSS:
```
.main-navigation .menu-bar-item > a {
    transition: line-height 300ms ease;
}
```
August 31, 2021 at 4:44 am #1913745

John

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?

August 31, 2021 at 8:06 pm #1914813

Elvin
Staff
Customer Support

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

September 1, 2021 at 2:35 am #1915064

John

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!!!
Author

Posts