Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

If links in your email’s navigation bar turn blue in Gmail, first check whether they are actual HTML links. For links you added with <a> tags, set the color on each anchor, preferably with an inline style. If the blue text is a phone number, address, or date that was plain text in your email, a mail app may have automatically detected it; that requires a different, client-specific diagnosis.

First, identify what Gmail is turning blue

“Navbar” usually means a row of navigation links in an HTML email, but blue text can also be contact information or a date that a mail client made clickable. Check the message’s HTML or source and compare it with the blue text you see:

  • Your markup contains an <a> around the text: It is an authored link. Set its color and decoration on the anchor.
  • The text is plain in your markup: A client may have detected a phone number, address, date, or other link-like text and made it clickable.
  • You mean Gmail’s own interface rather than an email you sent: These email-CSS steps do not change Gmail’s interface colors.

Set the color on navigation anchors

Apply the desired color directly to each link. For example:

<a href="https://example.com" style="color:#222222; text-decoration:underline;">About</a>

Replace the sample destination and color with your own. The color should have enough contrast against the email background. Keep an underline or another clear visual cue so readers can recognize the text as clickable.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Google’s Gmail CSS support documentation says, “Most CSS selectors, attributes, and media-queries are supported.” Gmail can still ignore unsupported CSS properties or selectors. Inline styling puts the color on the anchor itself; if you use a class or an embedded <style> block instead, check that your email platform preserves it and that it renders as intended.

If plain text becomes a blue link

Changing the style on your navigation anchors will not necessarily control text that a client has automatically converted into a link. Record the exact app, device, and operating system where the blue text appears before trying a workaround.

Critical Impact describes blue, underlined links created for phone numbers, addresses, dates, and other text in iPhone and iPad email views. Its suggested method uses a class on the target text and styling in the message head; the generated link remains tappable. That guidance is specifically about iOS Mail, not proof of a fix for Gmail’s web or mobile display. See Critical Impact’s iOS blue-link guidance and validate any approach in the client where the issue occurs.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Test the sent email in the affected view

  1. Inspect the sent message’s HTML or source and determine whether the blue text is inside an authored anchor or is plain text.
  2. For authored navigation links, add the color and text decoration to the anchor. Check whether your email service or template editor rewrites the markup.
  3. Send a test message and open it in the exact Gmail view where you saw the issue—web or app, on the relevant device. If the problem appears only on a phone, note its operating system and check whether the text is auto-detected.
  4. Compare other inbox and device combinations you need to support. If the change appears only in a particular appearance mode, test that mode as well; there is no universal dark-mode fix established here.
  5. Confirm that links remain readable and recognizable after the change.

Google also documents responsive email behavior: in a 2016 article, Google product manager Pierce Vollucci wrote that “Text, links, and even buttons will enlarge to make reading and tapping easier on a smaller screen.” That describes responsive rendering, not a guarantee that a particular link-color declaration will look identical in every client. See Google’s explanation of responsive Gmail email.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.