Different logo image per page?

Hi,

I’d like to switch back and forth between a black and a white version of my logo on each individual page. Is there a way to have a different logo display on each page?

I tried to create two header files and then calling them into the two page templates I created:

    1. black-logo.php 2. white-logo.php

However, the same logo continues to display on each page.

Any help would be appreciated.
Thanks!

Hello there,

Thank you for reaching out to us here.

The easiest way to alter the default logo image is by using CSS code. Copy the code below and paste it to Appearance > Customize > Additional CSS from your site dashboard.


/* Remove default logo */
.site-header .col-md-4 > a img {
  display: none;  
} 

/* Define new logo container styles */
.site-header .col-md-4 > a {
  display: block;
  width: 100px;
  height: 100px; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
} 

/* Display new logo image background */
.site-header .col-md-4 > a {
  background-image: url('https://yoursite.com/path/to/your-new-logo.png');
}  

In the last lines of code above, replace https://yoursite.com/path/to/your-new-logo.png with your image URL path.

To apply on a specific page, use page ID, which can be found when editing a page. In the browser’s address bar, you’ll see something like post.php?post=2&action=edit. So your code will look something like this:


/* Remove default logo */
.page-id-2 .site-header .col-md-4 > a img {
  display: none;  
} 

/* Define new logo container styles */
.page-id-2 .site-header .col-md-4 > a {
  display: block;
  width: 100px;
  height: 100px; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
} 

/* Display new image logo background */
.page-id-2 .site-header .col-md-4 > a {
  background-image: url('http://wp2.dev/sydney/wp-content/uploads/sites/3/2015/09/s2.png');
}  

Regards,
Kharis