Adding svg logo to site (squarespace 7.1)

Site URL: http://www.pitchurethis.com

Currently using Squarespace 7.1 and would like to upload my site logo as an svg. I know it can be done in 7.0 using certain templates but since the platform has changed, I can not seem to get any code to work to make this happen. Any one know a solution for this?

Can you provide password?

@tuanphan I've just made the site live temporarily. Please let me know if you can help me with this!

1 minute ago, colee424 said:

@tuanphan I've just made the site live temporarily. Please let me know if you can help me with this!

Hi

First you add a random logo. (you're using Site title, change it to image)

Then, I will give code to replace it with svg

@tuanphan I have just updated to a png of the site logo - let me know if this helps.

Add to Home > Design > Custom CSS

/* tuan -5mi */
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://image.flaticon.com/icons/svg/2728/2728997.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

See how to upload file: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Is there a way that the svg will change color based on the theme. Standard theme keeps the svg logo black. If you select Dark Bold theme the navigation text transitions to white. Can the svg do the same?

@tuanphan I tried this code using the theme Hawley but it is not working. Any idea why? I uploaded the file correctly I think, my URL is /s/svg0.svg

1 hour ago, Isha said:

@tuanphan I tried this code using the theme Hawley but it is not working. Any idea why? I uploaded the file correctly I think, my URL is /s/svg0.svg

try using fullurl, eg: https://yourdomain.com/s/svg0.svg

On 7/12/2020 at 12:32 PM, nathanhills said:

Is there a way that the svg will change color based on the theme. Standard theme keeps the svg logo black. If you select Dark Bold theme the navigation text transitions to white. Can the svg do the same?

no, you can't do this. You can insert code on each page to change color manually

Thank you so much Tuanphan! I tried that but unfortunately it didn't work.  I used https://static1.squarespace.com/static/5e01c1b95bff094372f7cdc2/t/5f2085ab78a97759df8acc10/1595966891992/svg0.svg as a link and although my initial image is hidden, this one isn't replaced 😞

On 7/29/2020 at 12:51 PM, Isha said:

Thank you so much Tuanphan! I tried that but unfortunately it didn't work.  I used https://static1.squarespace.com/static/5e01c1b95bff094372f7cdc2/t/5f2085ab78a97759df8acc10/1595966891992/svg0.svg as a link and although my initial image is hidden, this one isn't replaced 😞

Can you share link to your site? I can check easier.

@tuanphan - adding the full URL worked! i only spent three days trying every other imaginable solution...

Hi Tuanphan - this code worked perfect however after saving and moving between pages it disappears. Any idea why that might be happening. Thank you!

On 9/19/2020 at 10:46 PM, Kyle_ said:

Hi Tuanphan - this code worked perfect however after saving and moving between pages it disappears. Any idea why that might be happening. Thank you!

Can you share site url? We can check easier.

Yep. Just shared with you thanks.

5 hours ago, Kyle_ said:

Yep. Just shared with you thanks.

Hi,
You need to disable AJAX.

Please use the like button if it helps you!

Best,
Leopold

I don't think Ajax loading  is supported on version 7.1.

6 minutes ago, Kyle_ said:

I don't think Ajax loading  is supported on version 7.1.

Please share your website URL.

Best,
Leopold

On 9/19/2020 at 5:46 PM, Kyle_ said:

Hi Tuanphan - this code worked perfect however after saving and moving between pages it disappears. Any idea why that might be happening. Thank you!

Hi! I'm having the same problem: I used the code to add my SVG-logo and it works however when I go to a new page, the logo disappears. Any thoughts on why this is and how I can fix this? Thanks!

On 1/21/2021 at 5:50 PM, Antonides said:

Hi! I'm having the same problem: I used the code to add my SVG-logo and it works however when I go to a new page, the logo disappears. Any thoughts on why this is and how I can fix this? Thanks!

Can you share site url? We can check easier

On 3/23/2020 at 4:29 PM, tuanphan said:

Add to Home > Design > Custom CSS

/* tuan -5mi */
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://image.flaticon.com/icons/svg/2728/2728997.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

See how to upload file: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Any advice on how to make the mobile logo larger? https://tarantula-sheep-lrsb.squarespace.com/

Hi Tuanphan, I tried the code and also included my url, but it's still not working. Do you know what I'm missing? Thank you!

https://three-point-two-pamelahsiung.squarespace.com/

password: mineral

On 7/12/2021 at 5:50 AM, pamelah said:

Hi Tuanphan, I tried the code and also included my url, but it's still not working. Do you know what I'm missing? Thank you!

https://three-point-two-pamelahsiung.squarespace.com/

password: mineral

Hi. Incorrect password. Can you check it again?

Sorry about that, just updated again! Password: mineral. Thank yoU!

9 hours ago, pamelah said:

Sorry about that, just updated again! Password: mineral. Thank yoU!

Hi. The uploaded file wont' work in Trial Plan.

When you upgrade to paid plan, the file will work & the logo will show.