How to change inactive menu item color in Dawn theme?

Store Design
,
1

I have the main menu font colour set to white. However, I don’t like how the menu items are not white when the are not active or selected - instead they are this faded white/turquoise colour, which is too similar to the background colour (see image below).

I would like all the menu items to be white and stay white - like I have set the colour in the main settings.

Any help would be appreciated. Theme is Dawn.

Capture.JPG
Capture.JPG775×622 29.2 KB

2

Hi @minikate

To change the color of all menu items to white in the Shopify Dawn theme, you can add some custom CSS. Here are the steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Dawn theme you are currently using and click on the “Actions” dropdown.
  3. Select “Edit Code”.
  4. In the left sidebar, locate and click on the “assets” folder to expand it.
  5. Click on the “base.css” file to open it in the code editor.
  6. Scroll down to the very bottom of the file and paste the following CSS code:
.header__inline-menu .header__menu-item span {
color: white !important;
}
  1. Click the “Save” button.

This CSS code targets the menu item text specifically and sets its color to white. The !important declaration ensures this color is applied regardless of other styles.

After saving, all your menu items should appear white, both in their active and inactive states.

If you want to change the color of the menu items on hover as well, you can add this additional CSS code:

.header__inline-menu .header__menu-item:hover span {
color: white !important;
}

This will keep the menu items white even when hovering over them.

3

Hi @minikate

Would you mind to share your store URL? Thanks!

4

Thank you so much for your detailed explanation.

This worked for the header menu. However, the dropdown menu items are still that off-white colour, see image below. Do you know how to change these also?

Capture.JPG
Capture.JPG908×697 37.2 KB