Help with code for heading text and icon colors!

[glitteralex]

I am trying to change the following without impacting other color settings in my store:

1. The font color in header and footer

2. The icon (social icons, cart icon, search icon) color

3. The text color for the current page (see screenshot, how “Home” is pink).

I have managed to change the footer text color only using code from another person’s question that was answered, but that is all I’ve managed to find.

Thank you!

[Made4uo-Ribe]

Hi @glitteralex ,

Just to clarify, you liketo change

1. The font color in header and footer

2. The icon (social icons, cart icon, search icon) color

Same color to the HOME text in the SS attach? If im correct would you mind to share your URL website? with password if its protected. Thanks!

[glitteralex]

Hi! I want to change the 1. font color in header and footer & 2. icon color, to a DIFFERENT pink color (a color used in my website background gradient. I then want the “current page” color, where home right now is pink, to become white.

Does that clarify?

Here is the link to our customer facing site if thats what you mean?

https://fragrancevault.net/

[oscprofessional]

Hello @glitteralex

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.header__icon {
    color: #e28683 !important;
}
a.header__menu-item.list-menu__item.link.link--text.focus-inset {
    color: #e28683 !important;
}
a.link.link--text.list-menu__item.list-menu__item--link {
    color: #e28683 !important;
}

[Made4uo-Ribe]

Yes, Thank you for the information and clarification. I try the background color you have as you said but its a linear color. The output is this one. Anyway, you can change the color just remove the #hexcode color and replace it to your desired code.

So I just copied the color you put in the footer. Try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

a.header__menu-item.list-menu__item.link.link--text.focus-inset {
    color: #e4b9a5;
}
.header__active-menu-item {
    color: white;
}
.header__icons.header__icons--localization.header__localization svg {
    color: #e4b9a5;
}

Result:

I hope it help.

[glitteralex]

Thank you so much! Worked like a charm! The only other thing is that the social media icons in my footer are black - if i change it, it messes with the button colors in my store. Any thoughts? I would like them to be the same color as the other text we just did.

[Made4uo-Ribe]

Your Welcome, Im a bit confuse I didnt change anything in your footer cause it already change even the year. Check my SS below.

I check also in the incognito. Im using chrome.