How can I alter the color of a clickable link on my website?

Store Design

Topic summary

Issue: A phone number in the Shopify announcement bar appears white in admin/desktop but becomes a blue, clickable link on the live mobile site. The behavior is observed on an Apple iPhone.

Actions tried: A helper requested the store URL and provided theme editing steps (Online Store > Themes > Edit code > Assets > base.css). They suggested CSS targeting the announcement bar text span to force white text. The OP reported this did not work.

Follow-up: After confirming the device (iPhone), a second CSS fix was suggested targeting the link element (a) in the announcement bar to set color white and remove underline. The OP did not confirm whether this resolved the issue.

Current status: Another participant reported having the exact same problem and that both suggested CSS changes did not help, asking how it was solved. Code snippets are central to this thread, but no confirmed solution or workaround has been reached. The discussion remains open/unsolved.

Summarized with AI on December 17. AI used: gpt-5.
1

I have just created my shopify store. I have added my contact number on the announcement bar. When viewing on desktop and mobile on shopify admin the number is showing as my selected white font. However, when looking on the live site on my mobile the contact number is appearing as a blue clickable link. How do I change this so it shows as white?

URL: www.neoandcowatches.co.uk

2

Hi @Neo31

Please provide your website so we can provide the code appropriate for you. Thank you

3

Just updated the post. Thanks

4

Hi @Neo31

I dont see it in my end. What device are you using to view mobile? You can try the following code below.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
p.announcement-bar__message.h5 span {
    color: white;
}
  1. And Save.

If it helps, likes and mark as solution is appreciated :blush:

5

I have just tried this but it doesn’t seem to have worked.

when I am on my mobile. I am typing my website into the url and the contact number is showing up as a blue clickable link.

but when I am then viewing the website on my laptop it is just showing as white

6

Is this an apple device or android?

7

Its an apple iPhone

8

Hi @Neo31

Can you try the code below instead

p.announcement-bar__message.h5 a{
color: white;
text-decoration: unset;
}
9

Hi @Neo31 , I have this exact same problem. The two suggestions in this thread didn’t help. How did you solve it?

URL:https://motomandistributing.com