Announcement bar smaller

Store Design
, , ,
1

Can you please make my announcement bar a tiny bit skinnier.

Thankyou in advanced

url: hygiadental.com
pw: angel

Screenshot 2025-01-29 at 7.30.09 PM.png
Screenshot 2025-01-29 at 7.30.09 PM.png2176×492 26.2 KB

2

Hello,

To adjust the announcement bar size, you’ll need to make some CSS changes. Follow these steps:

  1. Navigate to Online Store → Themes → Edit code.
  2. Locate the assets/base.css file.
  3. Around line 2247, you’ll find this CSS rule:
.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}
  1. Update it as follows:
.announcement-bar__message {
  text-align: center;
  padding: 0.5rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
}

This adjustment will reduce the height of the announcement bar.

1 Like
3

Hi @Anonymous ,

Navigate to online store >> Click edit theme code.

Now find base.css/theme.css and paste the following code:

@media (max-width: 786px){
.announcement-bar{
max-height: 75px !important;

}
.announcement-bar__message{

font-size: 1.5rem;
}

}

4

Hi @Anonymous

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!