Issue with menu link color for Turbo-Portland theme

Store Design
, ,

Topic summary

Problem: In the Turbo–Portland Shopify theme, the navigation menu link color can’t be changed independently; it inherits from General > Links. Setting Links to white makes all page/body links white (invisible), and Header settings don’t affect the menu.

Tried: Adding CSS to styles.css.liquid:

  • .site-nav a { color: #ffffff; }
    This had no effect, likely due to different selectors/specificity in the theme.

Proposed solution: Use the theme’s actual desktop nav selectors with higher priority:

  • .nav-desktop a,
  • .nav-desktop summary {
    color: #fff !important;
    }
    The !important increases priority so the menu links render white without changing body links.

Notes: An image was referenced showing the Links setting relationship.

Status: No confirmation from the original poster that the suggested CSS resolved the issue; outcome pending (thread open).

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

Hello,

I’m using the Turbo-Portland theme and having some trouble with menu navigation link color. In the theme editor, I don’t see an option to change only the menu link color. It seems the color is determined by Links under General section (see image below).

I’d like the menu text to be white, but when I update Links under General, ALL links turn white and thus invisible in the body of pages. Changing options in the Header section doesn’t change menu link color.

So, my question is how to change ONLY the menu link color?

JPrez_1-1731954502376.png
JPrez_1-1731954502376.png507×1678 71.6 KB

Thanks!

JP

2

Tried this, but didn’t have an effect. I pasted this exactly at the bottom of styles.css.liquid:

.site-nav a {

color: #ffffff;

}

3

Hi @JPrez ,

Please change code:

.nav-desktop a, 
.nav-desktop summary {
    color: #fff !important;
}