Jump to content

Changing Colour of Logo on Homepage

Recommended Posts

Hello all.

I am currently using the Sonora Template which gives a nice banner image layered underneath the logo, so I have chosen a white logo.

However all other pages are white headers so the logo does not show.

How can i use a black logo and then invert or use a custom logo just on the homepage so that the logo it white on the homepage


Link to comment
  • Replies 3
  • Created
  • Last Reply

You can do this by adding code to the page code injection.  For Brine family templates like Sonora, you'd use 

.Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);

You can follow exact steps in this post. It also covers Bedford family templates and inverting the navigation color as well. 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 2 weeks later...


This topic is now archived and is closed to further replies.

  • 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.