A user needed to change the cart and drawer icons from grey to black (#000000) when scrolling past a transparent header on their Shopify theme. Changing the color scheme didn’t resolve the issue.
Attempted Solutions:
.header__icon selectors (caused unintended side effects—turned transparent header text black).scrolled-past-header class selectors (unsuccessful)Working Solution:
Adding CSS code to theme.liquid file before the </head> tag successfully changed the icon colors to black when scrolling, without affecting the transparent header’s white text.
Status: Resolved. The user confirmed the final solution worked as intended.
Hey there,
I am currently working on a duplicated theme. I have a transparant header, but when I scroll the icon cart & drawer have a bit of a grey color. I want to change that color to #000000 (so completely black) can someone please help me? It’s a little adjustment. (Ps, changing color scheme doesn’t help)
Hey @dieuxstudios
Follow these Steps:
Go to Online Store
Edit Code
Find password.liquid file
Add the following code in the bottom of the file above tag
RESULT
If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @dieuxstudios ,
Navigate to Online Store > Themes > click on Edit code.
Locate and open the theme.css or base.css file. Scroll to the bottom and add the following CSS code:
.header__icon--menu .icon {
color: black !important;
}
.header__icon, .header__icon--cart .icon {
color: black !important;
}
Result:
Hey Moeed, thanks for your quick help. Unfortunetly, it didnt work. Do you maybe have a other suggestion Kind regards
Hey, this unfortunetly also didnt work. When i added it to the custom css, it did work, but then the white text on the transparant header turned into black. is there maybe something else
The code is completely and it does works as well, can you double check if you added the code correctly? Maybe provide me a screenshot so that I can have a look too.
Best,
Moeed
Please try this code:
.scrolled-past-header sticky-header .header__icon--menu .icon {
color: black !important;
}
.scrolled-past-header sticky-header .header__icon, .header__icon--cart .icon {
color: black !important;
}
Still didnt work unfortunetly
Hi @dieuxstudios ,
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 
(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
This worked!!! Thank you so much!!!
