Nav bar bounces when I scroll

Hi, thanks for trying my plugin! ??

The reason why you’re seeing the “bounce”, is because of transitioning properties in your CSS. I understand why they are there, but this also means that changing from normal to sticky will show it in a transition.

If you don’t care too much about them, you can remove them and you won’t see the bounce anymore. However, if you need to keep them in (because you want the hover effect on the links in the menu to be smooth), then there’s not really much you can do about the bounce.

In style.css, line 1621:

.et_fixed_nav #et-top-navigation {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

In style.css, line 1683:

#top-menu a {
    display: block;
    position: relative;
    color: rgba(0, 0, 0, 0.6);
    text-decoration: none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

Hope this helps!

Thanks for the reply. Unfortunately, that didn’t solve it. It’s not just a subtle bounce, it’s actually moving up the screen a bit and creating space between the bottom of the nav bar and the hero image.

Thanks for the reply. Unfortunately, that didn’t solve it. It’s not just a subtle bounce, it’s actually moving up the screen a bit and creating space between the bottom of the nav bar and the hero image.

Hm, I don’t see this issue anymore on your site though?

See: https://cloudup.com/cOdPJlUT9F7

Please let me know if I’m looking at the wrong issue.

Thanks again for the replies. I ended up creating a new menu and using that instead of the default menu. It’s working great now, thanks for the plugin! I’ll close this thread.

Hi coltenv,

I think I have the same problem you had, it’s a little bit disturbing. What was the solution to solve that? Only creating a new menu?

Thanks a lot,

@mooncloudgreg If you can post a link to your site, I could take a quick look.

Have you seen my original reply? Transitions often cause this issue.

@senff Thanks for the reply. Here is the link to the website: lafermedalexandre.fr
Yes I tried, I put in commentary the style about transition, but unfortunately the effect is still here.

@mooncloudgreg I can see there is still a transition set on the #main-header. See styles.css (line 466):

#main-header {
    -webkit-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
    -moz-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
    transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
}

That needs to be removed as well. ??

@senff, it is working for the menu! Thanks a lot!
I had to comment some transition too about #logo and #logo_container, so it is working now too for the logo.

Thanks a lot for your help and responsiveness.

Excellent! Glad it’s working now. ??