How can I alter the text and icon colors in my website header?

Store Design
, , ,

Topic summary

A user seeks to change the text and icon colors in their website header, specifically for menu items, search, and cart icons.

Multiple solutions provided:

  • Add CSS code to base.css or theme.css targeting .header__menu-item, .header__active-menu-item, and .header__icon classes
  • Use color: white !important; or replace ‘white’ with desired hexadecimal color values
  • Alternative approach: insert CSS code in theme.liquid file above the </head> tag

Implementation steps:

  1. Navigate to Online Stores > Themes > Edit code
  2. Locate base.css or theme.liquid file
  3. Add provided CSS snippet at the bottom (for base.css) or above closing head tag (for theme.liquid)

Follow-up request:
The original poster asks for additional code to remove underline and hover/active page colors from the menu.

Discussion remains open with the secondary question unanswered.

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

Hello, I would like to change color of the text in the header and also change color of the search and cart icon. Thanks

https://c31a31-2.myshopify.com/

pass: owhown

2

Add this code in your base.css or theme.css:

.header__menu-item, .header__active-menu-item, .header__icon {
  color: white !important;
}

Replace ‘white’ with the color you want! (You can also use hexadecimal values, for example: #3B8B58)

1.PNG
1.PNG1202×105 18.9 KB

3

Hi @Cukrovinky

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1706057366454.png
PageFlyRichard_0-1706057366454.png2068×1576 165 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

4

Hello @Cukrovinky :waving_hand:

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.header__menu-item,
.header__active-menu-item,
.header__icon svg {
    color: #FFFFFF !important;
}

The result

Screenshot 2024-01-24 at 09.19.15.png
Screenshot 2024-01-24 at 09.19.15.png1190×110 19.2 KB

Hope that helps.

5

Hi Cukrovinky,

In Shopify Admin, navigate to “Edit theme code”, then open the “base.css” file and add the following code at the end:

.header__menu-item, .header__active-menu-item, .header__icon{ 
color: red; 
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

6

Hi cukrovinky,

Follow these steps :

  1. Go to Online Store

  2. Edit Code

  3. Find base.css file

  4. And put this code in the botom

.header__menu-item span {
  
    color: white;
}
.header__icon .icon {
    
    color: white;
7

Thanks for the solution. Can you also do code that removes the underline and color for hover and active page of the menu?