change announcement bar background

[myhope]

Hello, I have my site wich I edited in the past so the header backround is transparent. Now I want to add an announcement bar above the header but the background is transparent too. I want to make the background of the announcement bar black but the header background still remains transparent. In the code in "theme liquid" I spotted that it take it as a group but I don't know much coding so it would be easier if you can help. Thank you.

[BSSCommerce-HDL]

Hi @myhope, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

.bwp-header-topbar {
    background-color: black!important;
}

body:not(.template-index) .content-topbar .content-item-custom-text .custom-text,
.bwp_currency.currencies .current, #localization_form .header-selector__toggle
{
    color: #ffff !important;
}

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 😍

[PageFly-Henry]

Hi @myhope 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

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

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

.announcement-bar {

    background: black !important;

    color: white !important;

}

Additionally, I noticed the header menus display 2 lines causing the header to take up a lot of height on the website. You can customize the menu to only display on one line and make your website clearer

Hope that my solution works for you.

Best regards,

Henry | PageFly