How can I have the different text color of main menu item and submenu item?

Store Design
, , ,

Topic summary

A Shopify store owner wants to differentiate menu styling by having white text for main navigation items and black text for submenu items, but currently both display in white.

Current Issue:

  • Existing CSS code applies white color to both parent and child menu items
  • The styling affects header list items and buttons uniformly

Proposed Solutions:

  • One responder suggested targeting .site-nav__link for main items and .site-nav__dropdown .site-nav__link for submenus with different color values
  • Another user noted a potential visibility problem: the submenu background is black, so black text would be invisible

Status:

  • The suggested CSS solution did not resolve the issue
  • The store owner specifically needs the change to apply only on desktop view
  • The discussion remains open with no working solution yet implemented
Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

How can I have different text color for main menu item and submenu item? Right now, I have white color for both parent and child menu items. I want to have black for submenu items.

Here’s the store link:

https://wt2wgk-ux.myshopify.com/

1 Like
2

Hi @OneClothing ,

Please add the following code in to CSS:-

site-nav__link

{
color: white !important;
background-color: white !important;
}

.site-nav__dropdown .site-nav__link

{
color: black !important;
background-color: white !important;
}

Access Your Theme’s Code:

  • From your Shopify admin, go to Online Store > Themes.
  • Find your current theme and click Actions > Edit code.

Locate Your CSS File:

  • In the left sidebar, under the Assets folder, look for a file named theme.css, base.css, or styles.css. Click on it to open.

Add Custom CSS:

  • Scroll to the bottom of the CSS file and add the above code:

Please apply this code and do let me know if it resolves the issue else I could give more suggestions based on some more information.

Thanks!

3

Hi @OneClothing

Your submenu background is black, so if you use black color for the submenus, they will be invisible.

4

I only want to change on desktop.

5

Sorry mate! This does not work.

I am currently using this css code to only make the white color of icons and main menu items but this also effects on submenu/child items as well.

.header__list>li>, .header__buttons>li> {
color: rgb(251 251 244) !important;
}