Jump to content

Adding alternative SVG header logo for light/dark pages

Recommended Posts

Hi there,  I'm looking to add an alternative logo (white) specific for my darker pages. I'm ok with the nav links and other elements being their default colours. 

Further more, I'd like for my site's header logos to be an SVG. 

I am assuming it's a fairly simple task - adding a snippet of code to the page header code injection? - but any help would be greatly appreciated.  


Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

If you add this to the page header code injection for the lighter pages (given the white logo) it will invert the colour to black:

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


Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment

Thanks for this @Ziggy!

This should do the trick. As per my other questions:

  • Is there code for adding in alternative logo (in SVG format). For example, if I want logo to be a particular colour or even a different logo all together?
  • Is there code for adding a SVG logo so it works globally?

Thank you!


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.