Header Icon Color Change on Hover

Hi @shaaba1

Jasmine here from Plak support to assist you with your questions.

In order to move the icons so far to the right and add a color on hover, here is how to do it :

• From your Shopify dashboard, click Online store > Actions > Edit code
• Open the file theme.scss.liquid
• At the very bottom, paste this code

a.site-header__icon:hover, i.fa-search:hover {
color: red;
}
.site-header {
padding-right : 0px !important;
}

• Click Save

Note : In this example, the color on hover will be red, you can change its value to whatever you desire.

Kind regards,
Katrine

Hi,

Thanks for the quick response.

I have Plak 2.0

I just want the icons to change color on hover. I don't want to move them.

Is it just the first code that I need to use?

a.site-header__icon:hover, i.fa-search:hover {
color: red;
}

Also, if I want to use a hex color code how do I go about doing that?

Do I replace red in the above code with this code: #0088CC

Thanks

Hi @shaaba1

Sorry I misunderstood your question, and yes use just the first code

a.site-header__icon:hover, i.fa-search:hover {
color: red;
}

You can also use the Hex Color Color, example : 

a.site-header__icon:hover, i.fa-search:hover {
color: #751212;
}

Let me know if you have any other questions

Kind regards,
Jasmine

@plakadmin

Sweet!

Thank you