How to change the colour of one specific button in header menu?

Store Design

Topic summary

Goal: Change the “sales” button color in the Dawn theme’s header menu so it stands out (preferably blue).

Steps and attempts:

  • Helpers requested the store URL; the merchant shared https://radar-cannes.com/.
  • First recommendation: add CSS in component-menu-drawer.css using the selector “summary#HeaderDrawer-soldes font { color: red; }”. Merchant reported no effect.
  • Updated fix: use “summary#HeaderDrawer-soldes { color: #ff0000; }” (color value can be any hex, e.g., blue as #0000ff).

Outcome:

  • The revised selector worked; the merchant confirmed success.

Status: Resolved. The button color can be customized by editing component-menu-drawer.css and setting the desired hex color on “summary#HeaderDrawer-soldes”.

Summarized with AI on January 2. AI used: gpt-5.
1

Hi guys,

We would like to change the colour of out “sales” button to blue so it stands out, however we have not managed to do this so far. Dawn theme

2

Hi @Radar06400
Please provide the store URL so that I can provide you with the code.

3

@Radar06400 Please share your store URL to help you with this.

4

https://radar-cannes.com/

5

@Radar06400

Try adding the below code to end of “component-menu-drawer.css” file

summary#HeaderDrawer-soldes font {
    color: red;
}

You can change red to any other color or use hex code like #ff0000

Please hit Like and mark it as a solution if it helps.

6

Doesn’t do anything …

7

@Radar06400
I guess you have made some changes now. Try

summary#HeaderDrawer-soldes {
    color: #ff0000;
}

Please hit Like and mark it as a solution if it helps.

2 Likes
8

second time’s the charm worked perfectly thank you !!

1 Like