Header Bar Snaps Below Other Header Bar

Support
#1

We have multiple bars stacked in our header, the top being sticky and the bar below is to transition below the top sticky header. Everything is great except on scroll rather than slowly transitioning behind the top bar, it just “snaps” and disappears.

This isn’t the end of the world from a visual, but it does seem to be affecting our core web vital score in Google Search Console with a CLS (Cumulative Layout Shift) of more than .25 on mobile.

Any way to make the scroll smoother? I am adding a link to the site in a secure note. Thank you!

#2

Hey @tkcostello,

Your Sticky Bar’s Height is currently set to auto. It should be set to a fixed height, like 100 px. Just adjust it if 100 is too big.

That will prevent the content from jumping.

image

Thanks.

#3

That did it and it’s beautiful. Thank you!

#4

Hello @tkcostello,

Glad that we were able to help you. Please feel free to reach us if you have any more concerns.

Thanks

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.