Announcement bar color behind Social Icons

[meld78]

Can someone please tell me how to change the announcement bar color behind the Social Icons?
I’ve gone into announcement-bar.liquid and changed the color code but it’s not reflecting on the front end.

Can someone please tell me how I can change it in those two sections (left and right) that currently show white?

[Donny_SHT]

Hi @meld78

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one) so we can help you.

[meld78]

Thanks Donny.

URL: https://bobs-credits.myshopify.com/

PW: didahb

[Donny_SHT]

Hi @meld78

You can try follow this path:

Themes => edit code => asset => announcement-bar.css

and add this code to bottom of the file announcement-bar.css

.announcement-bar {
background: transparent!important;
}

[meld78]

Thanks Donny. It doesn’t give me the .css for the announcement bar, only the .liquid

[Donny_SHT]

HI @meld78
You can try to add this code to top of file announcement-bar.liquid

[meld78]

When you say top, can you please tell me where?

[Dan-From-Ryviu]

Hi @meld78

Please change this code in your announcement-bar.liquid file

To this

[meld78]

URL: https://bobs-credits.myshopify.com/

PW: didahb

[Donny_SHT]

on the line 1

[Dan-From-Ryviu]

Please check edit comments above

[meld78]

that didn’t work

[meld78]

Thanks Donny. That made it white but I want the yellow

[ZenoPageBuilder]

Hello @meld78

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

#shopify-section-sections--19842570748184__toolbar .toolbar {
    background-color: #ebcd47;
}

The result

Hope it helps!

[Donny_SHT]

Hi @meld78
To change the color to yellow as you want.
You can try to replace the code above with this:

.toolbar-section .toolbar {
background: yellow;
}

[meld78]

hm, I think I did something wrong. this is how it looks now

[meld78]

Thank you. How do I find base.css?

[Moeed]

Hey @meld78

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[meld78]

perfect, that worked. Thank you so much!!!

[Moeed]

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.