Header causing CLS and temp secondary scroll bar

[maryb43]

I have 4 bars, 2 visible on mobile and 2 visible on desktop

So far I’ve tried:
setting the bars and containers to overflow hidden
changed the z-index #s to 9999 &9998 for mobile // 9997 & 9996 for desktop
Setting content widths to either auto or 100%: same result either way.

I’m using the same header temple on two other sites, but I’m assuming the fix will be the same on them.

https://www.goldbergjones-wa.com is the one I’m attempting to fix first.

Thank you so much for any help you can give.

[prakash_s]

Hello @maryb43,

Thanks for writing to us.

I checked your site it seems that there is some cumulative layout shift issue, the issue might occur in the fonts, Iframe, images, etc. You need to set the correct height&width depending on the screen size to avoid the cumulative layout shift issue, for that you need to have responsive styling throughout the website. In case you have not seen our responsive styling doc please have a look at our documentation for responsive styling.

Responsive Styling | Themeco Docs

Please have a look at this article to learn more about cumulative layout shift

Cumulative Layout Shift (CLS)

Please note website performance optimization is beyond the scope of theme support. I would suggest you please contact a developer or you can subscribe to Boost where we do site performance optimization.

Hope it helps
Thanks for understanding