how to change multiple announcement bar heights

[robotcolleecter]

I want to change the heights, font sizes, and font colors of my two announcement bars separately. How would I do this?

website is https://836057-a3.myshopify.com/?_ab=0&_fd=0&_sc=1

password is theeti

[BSSCommerce-HDL]

Hi @robotcolleecter, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
#shopify-section-sections--23392580501779__announcement_bar_UjwiLM .utility-bar {
    height: 37px;
}

#shopify-section-sections--23392580501779__announcement_bar_UjwiLM p.announcement-bar__message.h5 {
    font-size: 12px;
    color: yellowgreen;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[robotcolleecter]

how would i make it so that the height of the first bar is 50px and the second is 30px?

[BSSCommerce-HDL]

Hi @robotcolleecter,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
#shopify-section-sections--23392580501779__announcement-bar .announcement-bar,
#shopify-section-sections--23392580501779__announcement-bar .utility-bar
{
    height: 50px !important;
}

#shopify-section-sections--23392580501779__announcement_bar_UjwiLM .announcement-bar,
#shopify-section-sections--23392580501779__announcement_bar_UjwiLM .utility-bar
{
    height: 30px !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍