How do I make my logo change color on a transparent header in dawn theme?

[EastsideMelrose]

I have two logos as you can see on the left of each picture. I want the "Logo Transparent" to change to the "Logo" when someone hovers over the header. The left image is the transparent header, the right image is the header when you hover on it.

URL: https://www.eastsidemelrose.com/

Password: opensesame

[tim]

Here is the CSS rule to help with this:

header:hover .header__heading-logo {
  filter: invert(1);
}

When configuring your "Header" section, put this code into "Custom CSS" setting.

[EastsideMelrose]

Hey Tim, 

It works when I put it in the Custom CSS section, but it won't let me save the changes. Is there somewhere I can put it in the header.liquid section that would work?

[tim · Accepted solution]

Interesting -- I did not try to save it 🙂 

Nothing wrong with the code, but if it does not work in "Custom CSS", just add it to the bottom of the assets/base.css...

[EastsideMelrose]

Works like a charm, thank you!

[EastsideMelrose]

Is there a way to make it where it only changes on the homepage and not every other page?

[tim]

Sure. One option is to remove the code from the assets/base.css and instead create a "Custom liquid" section on the home page and put it inside that section this way:

<style>
 header:hover .header__heading-logo {
   filter: invert(1);
 }
</style>