Jump to content

Change SVG Header logo on certain pages

Recommended Posts

I would like to change the SVG logo I'm using in the header to a different one on certain pages. I found this code:

header#header img {
    content: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);

That changes the logo, but the SVG comes in tiny on the page. I figure since using an SVG in general requires more in CSS than just replacing what's there, I'm obviously missing some code I need to use.

Link to comment
  • Replies 8
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Here's the link:

SVG test

You can see the current SVG by clicking on any of the navigation links. The replacement SVG in the page in question is the same size as the one used throughout the site.

Note that when it's seen online, nothing is showing where the SVG should be. In the Squarespace work area, I at least see it small:

Screen  178.png

Edited by CooperWhite
Link to comment

Currently you are using 2 code to add svg logo, and the code you posted in this thread didn't work.

This code works


to make your new code works, use this new code

  header#header .header-title-logo a {
    background-image: none !important;
    width: 200px !important;
header#header img {
    content: url(https://garlic-hawk-pdp3.squarespace.com/s/JohnWeberArt-10.svg) !important;
    visibility: visible !important;


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

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.