How can I make the Logo White on my “Home” page?

You’ve probably seen that the logo we’re using looks different on Homepage than on the other pages. This is happening because we’re using a filter on the front page to make it white:

.page-template-front_page .header--transparent .site-branding--image {
-webkit-filter: invert(1) hue-rotate(180deg) contrast(2);
filter: invert(1) hue-rotate(180deg) contrast(2);
}

This filter is working fine with our color scheme, but you may use another SVG logo on your website, and the filter might need some changes to have the same effect.

Well, there’s a little website that might help you get things done easily without needing to open the browser’s inspector and looking for the right combination of properties. This page will help you find the right filter for your logo — play with each property and find the combination for your file → CSS Filter Effects.

There’s one little problem with this tool. There’s no option to upload and preview your own logo, and you can apply filters only over the image that is already appearing on the page. Here you will need to open the browser’s inspector (right-click on the image and click Inspect in Chrome). Now, replace the src value with the link of your logo (supposing that it is already uploaded on your website).

For example, this is the link to the logo from our demo:

https://pixelgrade.com/demos/listable/wp-content/uploads/2015/11/listable-logo1.svg

This is the way it will look on the page:

Once you found the right filter, the final step is to copy the snippet below and paste it under the Appearance → Customize → Additional CSS section.

.page-template-front_page .header--transparent .site-branding--image {
//paste here the filter code
}