Dawn Theme - Add background color to desktop menu buttons

Store Design
, ,

Topic summary

A user seeks CSS code to customize desktop menu button colors in the Dawn theme, specifically:

Requirements:

  • Background color for desktop menu buttons only
  • Hover state color
  • Active/selected menu item color

Solution provided:

  1. Navigate to: Online Store → Theme → Edit code → assets → base.css

  2. Add CSS at bottom of file:

    • For background color: ul.list-menu.list-menu--inline { background: rgb(255 0 0); }
    • For hover color: nav.header__inline-menu ul li :hover { color: #beff00!important; }
    • For first item color: nav.header__inline-menu ul li:first-child { color: #beff00!important; }

Note: The theme lacks a built-in active class for menu items. The first-child selector targets only the first menu item’s color. Users should adjust color values according to their preferences.

The discussion appears resolved with working CSS solutions provided.

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

I’m looking for CSS to adjust the background color for desktop only menu buttons. I’d also like to be able to adjust button hover color & ‘current menu button selected’ color.

https://milkymotorsports.com/

2

Hallo @milkymotorsport

Are you talking about this?

Screenshot (19).png
Screenshot (19).png1358×242 37.7 KB

3

@harivishwakarma yes!

4

Hallo @milkymotorsport

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

(Change the color according to you.)


ul.list-menu.list-menu--inline {
background: rgb(255 0 0);
}

If you require any further information, feel free to contact me.

Best regards,

5

@harivishwakarma Can you advise on hover color and ‘active menu item’ color as well?

6

Hallo @milkymotorsport

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

nav.header__inline-menu ul li :hover {
color: #beff00!important;
}

(There is no active class in your menu, but even if you add this css, the color of the first class will change.)

nav.header__inline-menu ul li :first-child {
color: #beff00!important;
}

please like and accept soluction (all reply)

If you require any further information, feel free to contact me.

Best regards,