Make a 'Logo' exception

Hello support team,

I have a question about the Sydney Pro Theme
website: http://boostproducties.nl

I have a problem on this page: http://boostproducties.nl/man-with-hat/ (Yellow logo on Yellow background)

Can I make a ‘exception’ (by CSS) to show (only) on this page the ‘Black’ Boost-logo: (http://boostproducties.nl/wp-content/uploads/2017/06/Boost-logo-zwart.png

)

But when I scroll and the ‘sticky menu’ becomes visible the Yellow logo must be visible again.

Is that possible?

Thanks,
Tjeerd Engel

Hello there,

You can alter the default logo with this CSS code:


.site-header:not(.float-header) .col-md-4 a {
  display: block;
  width: 200px;
  height: 125px;
  background-image: url('http://boostproducties.nl/wp-content/uploads/2017/06/Boost-logo-zwart.png');
  background-size: contain;
  background-repat: no-repeat;
  background-position: center center;
}

.site-header:not(.float-header) .col-md-4 a img {
  display: none;  
}  

To apply it on your specific page, use page ID. I found that the ID of your “Man with Hat” page is 220. So you’ll use this code:


.page-id-220 .site-header:not(.float-header) .col-md-4 a {
  display: block;
  width: 200px;
  height: 125px;
  background-image: url('http://boostproducties.nl/wp-content/uploads/2017/06/Boost-logo-zwart.png');
  background-size: contain;
  background-repat: no-repeat;
  background-position: center center;
}

.page-id-220 .site-header:not(.float-header) .col-md-4 a img {
  display: none;  
}  

Regards,
Kharis

Thanks Kharis! Great!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis