Changing header icons and navigation menu color in mobile version only - Dawn

Store Design
,

Topic summary

A user needed to change the color of header icons and navigation menu text in the mobile version of their Dawn theme store, as white text was difficult to read.

Solution provided:

  • Add CSS code to the base.css file (Online Store > Themes > Edit code)
  • Target .header__icon, .menu-drawer__navigation, and cart icons with custom color values using !important

Issue progression:

  1. Initial code fixed most elements but left the “Inloggen” (LogIn) button white
  2. Additional CSS targeting .menu-drawer__account resolved the remaining button color issue

Outcome: Problem fully resolved. All mobile header elements now display in the desired color and are readable.

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

Hi everyone!

I changed color of header icons and navigation menu text in desktop version, but can’t do the same in mobile version. White color is hardly readable. Could you please help with the code?

Olga_MLB_0-1668505127574.jpeg
Olga_MLB_0-1668505127574.jpeg2388×1281 186 KB

Olga_MLB_1-1668505137133.jpeg
Olga_MLB_1-1668505137133.jpeg1593×1312 107 KB

Your help is much appreciated!

Regards,

Olga

www.mylittlebunny.nl

2

Hi @Olga_MLB

I would like to give you some recommendations to support you.

Please go to Online Store > Themes > click 3 dots button > Edit code >Base.css and code at the end of the file Base.css

.header__icon--cart .icon, .header__icon .icon {
      color: #648b80 !important;
}
#menu-drawer .link--text {
   color: #648b80 !important;
}

Hope my recommendation can support for you! :grin:

Kind & Best regards!
GemPages

1 Like
3

Hi @GemPages !

Thank you son, much! It works)

But only “Inloggen” (LogIn) button remains white. Is it possible to fix?

Olga_MLB_0-1668506994551.jpeg
Olga_MLB_0-1668506994551.jpeg1123×2218 111 KB

Best regards,

Olga

mylittlenummy.nl

4

You can add the following code after the above code at the end of the file base.css

.menu-drawer__account {
      color: #648b80 !important;
}

Hope my recommendation can works and support for you!
Kind & Best regards!
GemPages Support Team

1 Like
5

Thank you, @GemPages !

Now works perfectly!!

Regards,

Olga

6

I am glad that my recommendation is helpful to you :grin: .