Display different logo on product detail page

Site URL: https://www.houseofkimane.com/

Hi!  

I'm trying to display a different logo ONLY on the product detail pages. 

Right now I have a custom white logo on the main page and store, there it looks really good because of the image in the background. But in the product detail pages the logo gets completely lost because it's a white logo over white color (page background color without image).

I tried with this code on STORE SETTINGS/ADVANCED, but it changes the logo in both the store and the product detail page, and I would like to change it only in the product detail one

<style>.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/5f25a68ab4a57a02b8e4c8f8/t/5f310ce6649257471c73f09a/1597050086928/houseofkimane-header-logo-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
      height: 42px;
}</style>

Thank you so much for your help 🙂

Sofia

On the pages your want the darker logo, go to the page code injection and add, no need for a different image.

<style>
  .header-title-logo {
    filter: invert(1);
  }
</style>

is there a reason (@RWP) that this doesn't work for the montauk template?

On 12/15/2020 at 10:44 PM, MB12 said:

is there a reason (@RWP) that this doesn't work for the montauk template?

Above code for Squarespace 7.1 template.

Montauk is 7.0, you need to use this code

<style>
  .logo-image .logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>