How to change colour of logo on specific page

Hey,

I'm looking to change the colour of my logo on a specific page, i have used the code below to invert it but this just turns the logo black and im looking to have a specific colour #303A40

Here's the code i used to invert which works great but only turns it black;

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

But i want to change it to this specific colour, is there a little bit more code i could use/change to make this happen?

color: #303A40 !important;

Any help will be appreciated, cheers!

Yeah this would be the code for your desktop logo:

@media screen and (min-width: 767px) {

#collection-id-here

.header-title-logo img {

content:

url("insert-url-here") !important;

max-height:inherit !important;

}

}

Let me know if this helps!

Just to confirm the above code would be to just use a different logo file and not actually change the colour using code like how it can change it to black using “invert” there’s no way to leave the logo file as is and change colour you need to? It needs to use a different file?

On 5/21/2024 at 11:07 PM, adamrl said:

Just to confirm the above code would be to just use a different logo file and not actually change the colour using code like how it can change it to black using “invert” there’s no way to leave the logo file as is and change colour you need to? It needs to use a different file?

You can use code to change logo to black or white only, with another color, you will need to use code to change it to another file image