Change Font colour of header section when Scrolling through the page // Have two logos

[Raicesjewellery]

Hello,

this is my store: https://raicesjewellery.com 

As you can see the header background is transparent and when you scroll it is white, which is great! 

1. The only issue is that our logo is in black and i would like it to be in white when the background  is transparent and then change to black when i scroll and the background changes to white. The logo is a png.

2. As well as the logo, i would need the other features such as :shop icon, login icon, currency icon, search icon a.s.o to change colours as well from white to black. 

Could someone please help with this?

Thank you

[DaisyVo]

Hi @Raicesjewellery 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.section-header .header-wrapper * {
    fill: white !important;
    color: white !important;
}
html .section-header.scrolled-past-header .header-wrapper * {
    fill: black !important;
    color: black !important;
}

Here is the result: https://prnt.sc/Tvrs1GcXeGpw

This will change everything you requested to black, except the logo, as it is image (png) so it can't be changed using the code, but you need to use an image changing tool like Photoshop, Canva, and re-upload it

I hope this helps

Best,

Daisy

[Raicesjewellery]

Hello, thank you for your help. Unfortunately it didnt exactly work. It did turn white, but not black when scrolling.. do you think you have a solution for that? And also with the logo?

Thank you for your time!

[DaisyVo]

HI @Raicesjewellery 

This section should be set to white, but it still turns black when scrolling.

As for the logo, it can't be adjusted since it's a black image, and there's only one version of it.

I hope this helps

Best,

Daisy

[steve_michael2]

Hi @Raicesjewellery ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file

img.header__heading-logo.motion-reduce {
    filter: invert(1);
}
html .section-header.scrolled-past-header .header-wrapper img {
    filter: unset;
}
.header-localization:not(.menu-drawer__localization) {
    
    filter: invert(1);
}
html .section-header.scrolled-past-header .header-wrapper .header__icons.header__icons--localization.header-localization {
    filter: none;
}
header-drawer, svg.icon, button.disclosure__button.localization-form__select.localization-selector.link.link--text.caption-large, summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
    filter: invert(1);
}
html .section-header.scrolled-past-header .header-wrapper header-drawer, svg.icon, button.disclosure__button.localization-form__select.localization-selector.link.link--text.caption-large, summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle{
    filter: none !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!