Fixed navbar jolts when scrolling

[HugoW]

Hello,

In Ethos as well as Renew sites, I have a problem with the fixed navbars: they jolt when you scroll up. It happens in different browsers (chrome, firefox), on different desktop devices. Clearing cache does not work. I disabled all plugins.

See video: https://youtu.be/WQSeBUbK3Ho. If you watch closely, you see the navbar go up a bit and then settle again.

I noticed that someone reported the same problem in 2017, but the support team could not reproduce it. I hope in the mean time others reported it as well and a solution is available.

Thank you in advance!

[ruenel]

Hey Hugo,

Thanks for posting in. The slight jolt is the delay in events caused by the relative position of the Navbar compared to the fixed position. You can make use of this nifty CSS code that could eliminate this jolt:

.x-navbar-fixed-top-active .x-navbar {
    position: fixed;
    z-index: 1030;
    width: 88%;
    max-width: 1000px;
}

This code may apply to the site in question only.

Best Regards.

[HugoW]

Thanks! It worked.

[prakash_s]

You’re most welcome, Hugo.

[HugoW]

Hi there,

The CSS snippet works, but only with a wide enough screen size. On a tablet, the content layout falls behind the navbar. See screenshot. Do you happen to have a solution for that?

[ruenel]

Hey Hugo,

Update the code and use this:

@media (min-width: 979px) {
    .x-navbar-fixed-top-active .x-navbar {
        position: fixed;
        z-index: 1030;
        width: 100%;
        max-width: 100%;
    }
}

Kindly let us know how it goes.

[HugoW]

Hi Ruenel,

Thanks! That works well, although i changed the max-width to 1000px, because at 100% the navbar would outline to the right and only jump into place again when scrolling down.

[christian]

Glad to hear that @HugoW.