How to Solve Cumulative Layout Shift Caused by Announcement Bar?

Question

My eCommerce site (Shopify) has an announcement bar that pushes the rest of the page content down, causing CLS issues.

I've been searching through forums and articles for a while but all of the advice about solving CLS is super generic ("Make sure not to have pop-ups!") with a lack of guides for actual implementation.

The height of the announcement bar is a fixed 46 px on all devices, so this theoretically should be easy to fix by somehow assigning room for it in the theme files, but I can't figure out how to do so.

Answer 1

This should do the trick! add it at the end of your css stylings.

.announcement-bar{
  position: absolute !important;
  height: 25px;
  width: 100%;
  font-size: small;
}
.announcement-bar__message{
 padding:0 !important;
  
}

Answer 2

Are you sure it's the announcement bar? I had similar issue but it was the admin bar which only shows if you are logged in (I assume as admin) which was causing biggest CLS. When tested in a private browser, no issue