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

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

Can you share the preview URL of the draft theme?

Best,

Moeed

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

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

Hey Moeed, here is the screenshot:

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 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

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! :rocket: (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!!!