Jump to content

Coding - Wedsite logo

Recommended Posts

  • Replies 6
  • Views 447
  • Created
  • Last Reply
#collection-5b3e8ab8352f5323cc5513a3 .Header-branding-logo {
    filter: invert(1);
}

This isn't replacing the image, but its a neat little trick.

If you need to do it on more than one page, you will need the page ID's. I can get them if you tell me which pages.

Link to comment

If you use Business Plan, you can also add this to Page Settings > Advanced > Header

<style>
  .Header-branding-logo {
    filter: invert(1);
}
  img.Mobile-bar-branding-logo {
    filter: invert(1);
}
</style>

If you use Personal Plan, use @rwp code (Add to Home > Design > Custom CSS), to find Page ID, see this guide.

#collection-5b3e8ab8352f5323cc5513a3 {
  /* desktop */
  .Header-branding-logo {
      filter: invert(1);
  }
  /* mobile */
    img.Mobile-bar-branding-logo {
      filter: invert(1);
  }
}

 

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
.Header-branding-logo {
	filter: invert(1);
}

img.Mobile-bar-branding-logo {
	filter: invert(1);
}

#collection-57d6c581f5e23170b59ec7e3 .Header-branding-logo {
	filter: invert(0) !important;
}

Looking at your page more, I think its actually better for you to globally invert the image, and then just invert it back for the home page.

Good call on the mobile @tuanphan

 

Link to comment
1 minute ago, rwp said:

.Header-branding-logo {
	filter: invert(1);
}

img.Mobile-bar-branding-logo {
	filter: invert(1);
}

#collection-57d6c581f5e23170b59ec7e3 .Header-branding-logo {
	filter: invert(0) !important;
}

Looking at your page more, I think its actually better for you to globally invert the image, and then just invert it back for the home page.

Good call on the mobile @tuanphan

 

Okay, thank you! So do I add this in the Custom CSS? And do I need to add anything specific to the code for my particular logo?

Link to comment

Archived

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.