How to fix the font being white in the header options?

Store Design
, , ,

Topic summary

A Shopify store owner reports that header menu text appears white on some pages but black on others, creating a visibility issue.

Problem Details:

  • Font color inconsistency affects header navigation items
  • Issue appears to be page-specific rather than site-wide
  • Likely caused by conflicting CSS or page-specific styling

Two CSS Solutions Provided:

Solution 1 (rajweb):

  • Navigate to Online Store > Themes > Edit Code
  • Add CSS targeting .header__menu-item span to base.css file
  • Sets color to black with transition effect

Solution 2 (DaisyVo):

  • Access through Shopify admin > Customize > Theme settings > Custom CSS
  • Use nav.header__inline-menu * selector with !important flag
  • More aggressive approach that targets all navigation elements

Both solutions include screenshots showing the expected result with black header text. The discussion remains open pending confirmation from the original poster on which solution works for their specific theme.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

How to fix the font being white in the header options? It’s black for the other pages!

Website URL: https://1rzd08-i0.myshopify.com/

Password: riatri

322.png
322.png742×538 398 KB

2

Hey @lontessa ,

If the font color in the header options is white only on certain pages of your Shopify store and black on others, it may be due to conflicting CSS or specific page settings. Here’s how you can troubleshoot and fix it:

Follow these steps:

  1. Online Store

  2. Themes

  3. Edit Code

  4. Open base.css (or the equivalent CSS file for your theme).

  5. Paste your code at the end of the file for easy management:

.header__menu-item span {
    transition: text-decoration var(--duration-short) ease;
    color: black;
}

Result:

rajweb_0-1736241768826.png
rajweb_0-1736241768826.png1780×171 198 KB

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

3

Hi @lontessa ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

nav.header__inline-menu * {
    color: black !important;
}

Here is the reuslt:

DaisyVo_0-1736244136461.png
DaisyVo_0-1736244136461.png1345×623 655 KB

Please let me know if it works!

Best,

Daisy