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

Solved

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

Cukrovinky
Tourist
22 0 2

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

Accepted Solution (1)

Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

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

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 6 (6)

Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

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

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Cukrovinky
Tourist
22 0 2

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

PageFly-Richard
Shopify Partner
4902 1102 1776

Hi @Cukrovinky 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
header a, header span, header svg {
    color: #fff !important;
}
</style>

PageFlyRichard_0-1706057366454.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

ZenoPageBuilder
Shopify Partner
1052 203 229

Hello @Cukrovinky 👋

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

Hope that helps.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

topnewyork
Astronaut
1122 150 186

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!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

helen25
New Member
16 0 0

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;