Make announcement bar more narrow (codes aren't working)

Hi all, I’ve been trying to reduce the size of the announcement bar on our website (www.plumeskin.com) and for whatever reason all the codes I find on here don’t seem to be working when pasted after /body in the theme liquid.

Trying to basically reduce the space between the top and bottom of text by 30% or so. An example of a code I’ve tried is:

.announcement-bar__message { padding-top: 10px !important; padding-bottom: 10px !important; }

Any advice on what to do or why that might not be working would be greatly appreciated. Using the Sense theme.

1 Like

Hi,

It is because you set the height to botton which is not allow you to reduce height of the bar, make change to following height and you should be good:

Hi @LightStyl

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
div.shopify-section.shopify-section-group-header-group.announcement-bar-section {
    height: 24px !important;
}
p.announcement-bar__message.h5 {
    padding: 0 !important;
}
.announcement-bar .slider-button {
    height: 20px !important;
}

Here is the result: https://prnt.sc/4IIqWmKgtkNP

I hope this helps

Best,

Daisy