Have your say in Community Polls: What was/is your greatest motivation to start your own business?

What's the code to change the color of the announcement bar in Dawn theme?

What's the code to change the color of the announcement bar in Dawn theme?

goldengooseeeee
Excursionist
39 0 5

Thank you

Replies 3 (3)

WebDeskSolution
Shopify Partner
185 42 51

Hello @goldengooseeeee 

 

Once you Log in to the Admin, then process the following steps:

 

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

Step 2: Search the file base.css

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


You want to change the background color  for announcement bar use the below code

 

.announcement-bar
{
	background-color: #f00 !impotant;
}

 

You want to change the announcement bar text color use the below code

 

.announcement-bar__message
{
	color:#fff !important;
}

 

Output:

WebDeskSolution_0-1674496435265.png

 

If you find our reply helpful, please hit Like and Mark it as a Solution.

 

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

Thank You,


WebDesk Solution Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency | Call Us 877.536.3789


Location: 150 King St. W. Toronto, ON M5H 1J9

Taylor44
Tourist
8 0 1

Hello! I am adding a phone number to the announcement bar and I want the text to be white. On desktop it looks perfect, but when I look on mobile it changes the color to blue. I'm guessing it's because it is a phone number and hyperlinking it? How can I get the text on the announcement bar to stay white when on mobile? I feel like your code above is on the right track, but for some reason it doesn't work on mobile when you use numbers instead of letters. 

 

 desktop.png

 

Mobile.jpg

Taylor44
Tourist
8 0 1

When I add words between the numbers it keeps the text white. This has to be a hyperlinking issue. Does anyone know how to fix something like that?

 

mobile2.jpg