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 kind of 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 in order to have the same effect.

Well, there’s a little website that might help you get things done easily, without needing to open the inspector of the browser and looking for the right combination of properties. This is the page that 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, you can apply filters only over the image that is already appearing on the page. Here you will need to open the inspector of the browser (right click on the image and click Inspect, in Chrome). Now, just 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:

The final step, once you found the right filter, 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
}
Updated on May 31, 2017

Was this article helpful?