Re: 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
191 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