Strange bump when scrolling back to top

Hi Annamari,

I can’t seem to replicate the issues you've mentioned from my end. The transition from the sticky navigation to the "non-sticky" navigation seems smooth when the back-to-top button is pressed.

This may potentially be a caching issue. Can you try clearing your browser’s cache? If this doesn’t work, can you try viewing the site from a different browser or device to completely rule out browser caching as the cause of the issue?

Kindly let us know how it goes. :)

Hi Fernando,

I checked it in a different browser/device and I can still experience the problem.

It happens when scrolling back to top manually, more slowly, not with the back-to-top button.

I'm attaching an image of it in the private area.

I see. That’s actually the default behavior/design when Sticky Navigation is used.

For instance, here is my test site: https://share.getcloudapp.com/8LuDpE7Y

If you would like an alternative, you can do away with the Sticky navigation and make the navigation fixed instead.

For instance: https://share.getcloudapp.com/9ZumDOxv

To do this, as mentioned, first disable the Sticky Navigation. Then, add this CSS in Appearance > Customize > Additional CSS:

body {
    padding-top: 88px;
}

header#masthead {
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding this through additional CSS should work.

If you wish to apply this fixed nav on Desktop only, use this instead:

@media (min-width: 1025px) {
   body {
    padding-top: 88px;
}

header#masthead {
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
}
}

Hope this clarifies! :)

Hi Fernando,

Thanks!

I'm using the same function on a different site (link in private info box), and it doesn't happen there... So that's why I don't understand.

Thanks for your suggestion anyway!

Hi there,

if you want to re-enable the sticky navigation i can take a closer look.

Hi David,

re-enabled, thank you.

Its annoying 'bug'.
The sticky nav is a clone of the default navigation. And when the sticky appears it adds 40px left and 40px right padding to the inside-navigation container.
Which is fine for the sticky, but NOT the default nav, this extra padding causes the menu items to reflow and wrap to two lines so its now double the height and prone to peaking out when you scroll back to top and causes the annoying little bump.

The other site is ok, as there is more space in the navigation to accommodate the padding without causing reflow.

Options:

1. makes some more space in the menu by reducing the menu item font sizes or menu item widths ( in customizer > Layout > Primary Nav ).
2. enable the Navigation as Header option in Customizer > Layout > Header. If need be we can throw some CSS at it to make it look more like the current nav.

Let me know

Thank you, David, I enabled the Navigation as Header option, and now it seems OK to me!

Appreciate your help, thanks again!

Glad to hear that!
The Nav as Header is the best option :)