Debut theme header icon colors

Highlighted
Excursionist
40 0 4

Hi all,

 

I'm trying to change the color of the header icons of the Debut theme. There's a topic that touches on how to do this here:

https://community.shopify.com/c/Shopify-Design/Header-Icon-Colors/m-p/347617 by adding the below css to the stylesheet

 

.icon-search {
  color: white; 
}

.icon-cart {
  color: white; 
}

.icon-hamburger {
  color: white; 
}

This doesn't mention the user account icon though and I don't know what the reference is for it. Additionally, this code doesn't cover the on-hover action. I want to use a different color to indicate hover.

 

Can anyone advise how to do this? For reference this is for the following website: https://www.yoyelo.co.uk

0 Likes
Highlighted

Hello 

Use below css to change color on hover

.site-header__icon svg:hover {
 color: red;
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
40 0 4

Hi again Pallavi,

 

Thanks. There are a couple of issues with this solution:

  • It doesn't work on the search icon
  • The colour only changes (to red in this case) if you hover directly over the icon, if you hover in the area of the icon you still see it change to white on hover and not red. 

I've updated the css so you can see for yourself at https://www.yoyelo.co.uk/

 

Thanks again!

0 Likes
Highlighted
Shopify Expert
2620 440 564

Hi @Tinselworm 

Use this css:

.site-header__icons-wrapper .site-header a:hover,.site-header__icon svg:hover{
    color: red;}

Note: Search bar can not get hove effect because of its "pointer-eventsnone;"  we need this for search bar because if you try to remove this then it will redirect on search page when you first click. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Shopify Staff
Shopify Staff
873 90 166

Hey there, @Tinselworm 

 

Bo here from Shopify Support!

 

That is a great question. The following code with the colors you want substituted in at the very bottom of the theme.scss.liquid will do the trick: 

.icon-search {
color: white; 
 &:hover {
color: red;
}
}

.icon-cart {
color: white; 
 &:hover {
color: red;
}
}


.icon-hamburger {
color: white; 
 &:hover {
color: red;
}
}


.icon-customer {
color: white; 
 &:hover {
color: red;
}
}

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
40 0 4

Hi guys, thanks for all your replies, they're greatly appreciated.

 

@Bo  I tried your solution and it works, except for the customer account icon. This code changes haven't affected this icon — see for yourself at the following URL: https://www.yoyelo.co.uk/

 

Any ideas why not? 

0 Likes
Tourist
16 0 1

Hey Tinselworm, I see that you managed to make it work. How did you do that? Customer account icon doesn't get affected.

Cheers

0 Likes