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.

show us the HTML/CSS in a snippet besides what you already have tried please. — Mahmood Kiaheyrati, Dec 13 '20 at 01:34
@MahmoodKiaheyrati the HTML/CSS of what? The announcement bar? — calcodes26, Dec 13 '20 at 01:45
anything that you think might help figuring out the problem and understanding the relation of different elements on the page. may i have your sites url? — Mahmood Kiaheyrati, Dec 13 '20 at 01:59
CSS relating to announcement bar: .announcement-bar { display: block; text-align: center; position: relative; text-decoration: none; } — calcodes26, Dec 13 '20 at 14:25
Should I make position "static" and set the height of 46 px? — calcodes26, Dec 13 '20 at 14:27

Mahmood Kiaheyrati · Answer 1 · 2020-12-13T22:11:13.477

0

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;
  
}

edited Dec 13 '20 at 22:11

answered Dec 13 '20 at 20:09

Mahmood Kiaheyrati

512
4
14

Hey Mahmood thanks for your response. This is where things get a little tricky, because my site is built with Shopify which is a CMS, so in the theme files I don't actually see that HTML. – calcodes26 Dec 13 '20 at 21:39
Hey so unfortunately that didn't work. When I use those settings it just makes the announcement bar overlap the existing page, rather than leave fixed room for the announcement bar. See here: https://imgur.com/a/SBXiQ24 – calcodes26 Dec 13 '20 at 22:40
I did increase the font weight and the height of the bar to 46 px instead of 25 because those are the values I want for those categories and I don't want to change those. I want to find a way to solve this CLS issue without making font smaller – calcodes26 Dec 13 '20 at 22:40

score 0 · Answer 2 · answered Jun 07 '22 at 17:03

0

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

answered Jun 07 '22 at 17:03

TMG74

1

1

Welcome to Stack Overflow! Please phrase this as an explained conditional answer, in order to avoid the impression of asking a clarification question instead of answering (for which a comment should be used instead of an answer, compare https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead ). For example like "If your problem is ... then the solution is to .... because .... ." – Yunnosch Jun 07 '22 at 17:08

How to Solve Cumulative Layout Shift Caused by Announcement Bar?

2 Answers2