Hi!
Recently I’ve changed the color of header menu but I can’t change the color of the icons (search, cart, account) on desktop and hamburger menu, search and cart on mobile.
My website is www.vlasom.com
I’d appreciate any help
1 Like
Hi!
The color is coming from this selector: .header__menu-item, .header__active-menu-item, .header__icon .icon
So you can go to your CSS file and find that selector or add:
.header__icon .icon {
color: #[your color];
}
If it doesn’t work write !important after the color like this:
.header__icon .icon {
color: #[your color] !important;
}
If it doesn’t work let me know!
You mean base.css?
Yes
It’s not working
even if you write !important?
Yes
Can you paste the code here?
Are you making the changes in the live version and saving or on a duplicate theme?
.header__icon .icon {
color: #black !important;
}
.header__menu-item {
color: #black !important;
}
.header__active-menu-item {
color: #black !important;
}
Oh, if you’re writing the name of the color it should not have the # before it. Sorry, I should’ve been more specific. Only add the # if you’re writing it in hex, like #000 for black, or #fff for white. Otherwise just write black or white.
So like this:
.header__icon .icon {
color: black !important;
}
or
.header__icon .icon {
color: #000 !important;
}
1 Like
Still not working 
Is that code on the live website?
yes
I think it’s because you have two .header__icon .icon selectors in base.css.
Find the first one, should be around line 2394. Or just do a search. it has these properties:
.header__icon .icon {
height: 2rem;
width: 2rem;
fill: none;
vertical-align: middle;
}
Add the color to the end:
.header__icon .icon {
height: 2rem;
width: 2rem;
fill: none;
vertical-align: middle;
color: black !important;
}
And delete the ones you created that only had the color property.
Actually, it’s because you added the code inside a media query. In any case, delete the ones you wrote at the end of the file and do what I wrote above.
Thank you!
It worked