Header Icon Colors

Shopify Partner
10 0 0

Hello.

I am using the Debut theme and have manually changed the header background color in the theme.scss.liquid file because it's not possible as far as I'm aware to set different colors for header and footer features. Having done that I now need to change the icon color for just the header icons which are no my site the search icon, the cart icon and for mobile the hamburger menu icon. I can't seem to find these defined in the code however. Could anyone help please?

Thanks

0 Likes
Shopify Staff
Shopify Staff
547 4 82

Hi Zac!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to optimise exactly how your header should look so let's see how we could set this up. You will be looking to add some CSS in to the bottom of the theme.scss.liquid. For example to change these icons to white you would add this to the stylesheet:

.icon-search {
  color: white;
  
}

.icon-cart {
  color: white;
  
}

.icon-hamburger {
  color: white;
  
}

Hope this helps Zac, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

0 Likes
Shopify Partner
10 0 0

Hi Liam thanks for replying. I'm just about to try this but I was assuming that they were already defined somehere in the docuement but I just couldn't find them?

0 Likes
Shopify Staff
Shopify Staff
547 4 82

Hi Zac,

Thanks for getting back in touch. The stylesheet could very likely contain elements which define the colours of these icons- however any CSS added to the bottom of the file will override code above it. We advise adding changes to the bottom instead of manually changing parts in the middle, as changes to our scss files cannot be rolled back to previous version- unlike most of the other liquid files that make up a theme. So if any change needs to be reversed you can simply remove the code from the bottom, rather than searching through the file looking for the troublesome code. We would also recommend adding a note above any custom code you add, just to give yourself a reference of why it was added. 

I hope this helps Zac. Please let me know if I can clarify any of the above points.

Liam Griffin | Customer Success Guru

0 Likes
New Member
3 0 0

Hi! I've followed your tutorial and it worked great. Nevertheless, My mobile menu icon is not changing color as i have not defined a new value for it. I am using the Brooklyn template, do you happen to know the name of the icon so i can change it using your method?

0 Likes
New Member
3 0 0

I also need to change the colours for 3 expansion bars and user icon on my page. 
What would be the code for that? 

0 Likes