Fill .svg site logo to be white before scroll

Hi There. I have a dark blue header image, and I’ve managed to have my menu links start off white before you begin to scroll the page. The links then transition to blue. I’m using an .svg image for my site logo in the upper left. I would like the logo to fill with white before you begin to scroll so you can see it, and then transition back to it’s full color version when the white menu bar comes up and the other links are blue.

My site url is

Thanks so much for the amazing support you’ve provided throughout the forums. I’ve been able to accomplish more than I ever though possible just by reading the great feedback you all provide. Great work!


You should be able to achieve this with css code below:

.site-header.fixed .site-logo {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);

.site-header.float-header .site-logo {
    -webkit-filter: brightness(1) invert(0);
    filter: brightness(1) invert(0);

Apply it from Appereance > Customize > Additional CSS field and result should look like this

Best Regards!

Worked like a charm. You guys rock!

Update: I recently upgraded to Sydney Pro because you guys rock. The invert and transition were working great, but after the upgrade something is slightly off. When each page loads, the logo shows up in full color. If I scroll what seems like 1-2px, then the logo inverts and looks like I want it too. The transition to full color works fine. Any advice?

Please let me know if I need to start a new thread.