Jump to content

Invert Logo Color on Header for Certain Pages

Recommended Posts

13 hours ago, marchbank said:

Site URL: https://vanilla-ellipsoid-frjx.squarespace.com/



I would like to invert the color of the logo from black to white on certain pages of my site.

The Homepage, Listings Page (portfolio), & Listings Post Pages (portfolio pages).


The theme is CLARKSON.

Please let me know the code to do so. 


Thank you!


Hi. Your site is private. Can you setup password & share url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Your logo is quite simple and black, so it can be inverted with a CSS filter. You can either choose to do this yourself by adding a code block to the relevant page, or you can let squarespace help you out. It identifies headers that will be light on dark by adding the "black" class to the header. you can see the effect of this very easily by reverting to a text only header.

if you want to follow that, then add this code into your sites custom css

header.black div.header-title-logo img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);

note that your logo will be black on white backgrounds, and white on darker ones.

if you want to do this just for one page, then add a code block to that page and add the code above but without the header.black bit, and place it inside a style block. like this

div.header-title-logo img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);

that should do it.

I'd favour the first option using the Custom CSS (from the main Design menu of the editor). it will make the change automatically as you add new pages, and much easier to change later on if you want to alter the way it looks.



Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 2 years later...

Thanks for this post. I tried doing the first approach iamdavehart.

See attached image.

For some reason, it does not seem to effect the png image that is inserted as my logo image. Am I'm misunderstanding your instructions somehow?

My website is www.studioecesis.com. You will notice the logo image is too white to function on any of the pages other than the projects

Any help is appreciated.




Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.