Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Meezus

Changing Colour of Logo on Homepage

Question

Posted (edited)

Hello all.

I am currently using the Sonora Template which gives a nice banner image layered underneath the logo, so I have chosen a white logo.

However all other pages are white headers so the logo does not show.

How can i use a black logo and then invert or use a custom logo just on the homepage so that the logo it white on the homepage

Thanks.

Edited by Meezus
wrong phrasing

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 1

You can do this by adding code to the page code injection.  For Brine family templates like Sonora, you'd use 

<style>
.Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

You can follow exact steps in this post. It also covers Bedford family templates and inverting the navigation color as well. 

Share this post


Link to post
  • 0

Or if you want to put this code in once and have it work on all instances of pages where you don't use a banner image, you can use this tweak on the code from @christyprice

.Header:not(.Header--overlay) img.Header-branding-logo {
    -webkit-filter: invert(100%); 
    filter: invert(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...