How to change color text header (icon cart & drawer) when you have a transparant header

[dieuxstudios]

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)

[Moeed]

Hey @dieuxstudios 

Can you share the preview URL of the draft theme?

Best,

Moeed

[dieuxstudios]

https://0vt8b3l92s7f8bi4-90644578647.shopifypreview.com

[Moeed]

Hey @dieuxstudios 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.scrolled-past-header * {
    color: black !important;
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[dieuxstudios]

Hey Moeed, thanks for your quick help. Unfortunetly, it didnt work. Do you maybe have a other suggestion Kind regards

[Moeed]

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

[dieuxstudios]

Hey Moeed, here is the screenshot:

 

[steve_michael2]

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:

[dieuxstudios]

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

[steve_michael2]

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;
}

[dieuxstudios]

Still didnt work unfortunetly

[websensepro · Accepted solution]

Hi @dieuxstudios ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media(min-width:768px){
.shopify-section.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header .header__icon.link {
    color: #000 !important;
}
}
@media(max-width:767px){
.shopify-section.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header .header__icon.link {
    color: #000 !important;
}
}
</style>

 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!

[dieuxstudios]

This worked!!! Thank you so much!!!