dawn theme - invert header logo (reactive to transparent header)

joedogfish
Explorer
66 0 12

Trying to get my logo in my header to invert when the header is transparent? 

 

so far I've been able to invert the logo but it doesn't change back when the header has a filled background

 

I used this in base.css

.header__heading-logo {
  filter: invert(100%);
}

however I need it to be only when .site-header-transparent is active?

 

Please see screenshots for examples of desired outcome 🙂

 

so it inverts to white when the header is transparentso it inverts to white when the header is transparentthen turns back to its initial colour (black) when the header is filled whitethen turns back to its initial colour (black) when the header is filled white

Reply 1 (1)

made4Uo
Shopify Partner
3804 713 1124

Hi @joedogfish 

 

Depending on the placement of the site-header-transparent. This should work

 

 .site-header-transparent .header__heading-logo {
  filter: invert(100%);
}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!