How can I change the 'Home' button color on my menu?

Technical Q&A
,

Topic summary

A user is trying to change their Shopify Dawn theme menu color from white to black using CSS, but the ‘Home’ button remains white.

The issue is identified: the Home button appears white because it represents the currently active/clicked menu item, not an inactive state.

Solution provided:

  • Target the active menu item class (.header__active-menu-item) with color: red; (or desired color)
  • For desktop-only styling, wrap the CSS in a media query: @media screen and (min-width: 990px) since Dawn’s mobile breakpoint is 989px

Code snippets included demonstrate both the basic active state styling and the media query approach for desktop-specific changes.

The discussion appears resolved with working solutions for both the active state color and responsive styling requirements.

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

I have just changed the menu color from white to black with the code listed below, but the “Home” tab didnt change to black. please help!

a.header__menu-item.header__menu-item.list-menu__item.link.link–text.focus-inset {color: black !important;}

summary.header__menu-item.list-menu__item.link.focus-inset {color: black !important;}

2

Which Shopify theme are you using?

3

I use the Dawn theme. I just realized the Home button is only white because it’s clicked on. meaning if I were to go to a different menu item, that one turns white. How would I change the color of the menu item once its clicked on?

4

You can comment your code and try this

.header__active-menu-item {
    color: red;
}
5

Thank you! How would I change the menu color to just apply to the desktop view and not the mobile view?

6

You can use CSS media queries. Dawn mobile menu breakpoint is at 989px therefore this code should work and change the menu link colors only on desktop view

@media screen and (min-width:990px) {
  .header__active-menu-item {
    color: red;
  }
}