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

Store Design
1

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

so it inverts to white when the header is transparent
so it inverts to white when the header is transparent314×188 47.9 KB

then turns back to its initial colour (black) when the header is filled white
then turns back to its initial colour (black) when the header is filled white362×380 81.5 KB

2

Hi @joedogfish

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

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