When I add a number to the announcement bar it turns blue when on mobile but stays white on desktop. How do I keep it white on both mobile and desktop? Is this a hyperlinking issue? The problem goes away when I add letters with the numbers.
Topic summary
Issue: On Shopify’s Dawn theme, announcement bar text that includes numbers appeared blue on mobile but stayed white on desktop. Adding letters next to the numbers stopped the blue color. The poster suspected auto‑linking/hyperlink behavior.
Steps taken and suggestions:
- Shared the public store URL (declined to share password for security).
- Advised to update Theme settings > Colors and assign a white color scheme to the announcement bar.
- Advised to add CSS via Edit code (theme.css/base.css):
.announcement-bar a { text-decoration: none !important; }
Review and findings:
- Another contributor checked the mobile code and reported no blue color present and that the phone number was not clickable, suggesting the issue might have been resolved or not reproduced.
Outcome: The store owner confirmed the issue is fixed and expressed appreciation. No further technical cause was confirmed.
Status: Resolved. Key actions were adjusting the announcement bar’s color scheme and adding CSS to normalize link styling. Images (mobile/desktop screenshots) were included but not essential to the final resolution.
1 Like
Hey @Taylor44
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hello @Taylor44
Please share your store URL and password.
So that I will check and let you know the exact solution here.
No i’m not doing that
No i’m not doing that. SHopify says not to do that for security purposes
Hello @Taylor44
I am requesting the store’s frontend URL, not backend access. Without the URL, how can I assist you?
Hello, @Taylor44 , First you need to change announcement bar scheme, and for this you need to follow these steps
- Go to the Theme settings, then choose color option and make a white scheme then you can make white scheme easily,
And for text
- Go to Online Store
- Edit Code
- Find theme.css/base.css file
- Add the following code in the bottom
.announcement-bar a {
text-decoration: none !important;
}
Hi @Taylor44 ,
I have reviewed the mobile code and cannot find any instances of the blue color you mentioned. Please double-check for any remaining errors.
Additionally, the phone number provided is not clickable.
Best,
Daisy
Thank you it is now fixed. Much appreciated
@Taylor44
Your Truly Welcome! If you find my advice helpful please remember to LIKE and accept as SOLUTION.