[Resolved] 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. 🙂

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 there,

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

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

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