Change logo for product pages

Site URL: https://calliope-strawberry-54ay.squarespace.com/

Hi I'm looking to change the site logo to green (I've uploaded a png version in custom files) for all individual product pages. Here is an example page ...

https://calliope-strawberry-54ay.squarespace.com/shop-flowers/bingham-park-bouquet-spring-2021-rpjxc-a97kj

 I've managed to achieve this on other pages exampled here - https://calliope-strawberry-54ay.squarespace.com/stories

Thank you!

19 hours ago, domr said:

Site URL: https://calliope-strawberry-54ay.squarespace.com/

Hi I'm looking to change the site logo to green (I've uploaded a png version in custom files) for all individual product pages. Here is an example page ...

https://calliope-strawberry-54ay.squarespace.com/shop-flowers/bingham-park-bouquet-spring-2021-rpjxc-a97kj

 

 I've managed to achieve this on other pages exampled here - https://calliope-strawberry-54ay.squarespace.com/stories

 

Thank you!

Add to Design > Custom CSS

/* Product details page logo */
body.collection-type-products.view-item .Header-branding-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}

Thank you. Instead of just inverting the white logo, I would like it to appear as the green logo I have uploaded into my custom files - the green logo displays on other pages, is it possible to apply to products too?

20 hours ago, domr said:

Thank you. Instead of just inverting the white logo, I would like it to appear as the green logo I have uploaded into my custom files - the green logo displays on other pages, is it possible to apply to products too?

Remove above & add new code

/* product details new logo */
body.collection-type-products.view-item a.Header-branding img {
    visibility: hidden;
}
body.collection-type-products.view-item a.Header-branding {
    background-image: url(https://cdn.pixabay.com/photo/2020/04/28/12/40/tulips-5104311__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Replace with your logo image url

Hi, picking this back up - I would like to change the logo colour of the following pages too:

https://www.plantologyflorist.co.uk/workshops

https://www.plantologyflorist.co.uk/sustainability

Also is there a way to make the nav bar items green opposed to white?

Thanks

On 10/4/2022 at 10:19 PM, domr said:

Hi, picking this back up - I would like to change the logo colour of the following pages too:

https://www.plantologyflorist.co.uk/workshops

https://www.plantologyflorist.co.uk/sustainability

 

Also is there a way to make the nav bar items green opposed to white?

Thanks

 

Add to 2 Pages Header

<style>
  img.Header-branding-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}
  a.Header-nav-item {
    color: green !important;
}
</style>