Jump to content

Adding SVG Logo to Header

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > Custom CSS. Replace image url with new url

.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
22 hours ago, CahootCreative said:

Hey, I'm also desparate to get an svg logo into the header. Your code Tuanphan works for a bit, then disappears.  Any ideas?

Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...

I'm trying to do this too. Site is resumeinsider.net

I added a transparent logo image and added some code to my CSS to overlay the svg version. For some reason, I can see it in the SS backend environment, but it's not appearing on the live site. I suspect that I need CSS that works on Brine and that is what the issue is with the code I added.

Any help would be greatly appreciated!

<table style="width: 430px;">
<tbody>
<tr>
<td width="288" style="width: 420px;">
<p style="color: #43414e;">Heather Hamilton</p>
<p style="color: #43414e;">Founder, Resume Insider</p>
<div style="color: #bc8420;">
<p><a href="https://resumeinsider.net/" style="color: #43414e;">Website</a>&nbsp; |&nbsp; <a href="https://www.facebook.com/resumeinsidernet" style="color: #43414e;">Facebook</a>&nbsp; |&nbsp; <a href="https://www.linkedin.com/in/heatherhamilton/" style="color: #43414e;">LinkedIn</a>&nbsp; | <a href="https://about.me/heatherhamilton" style="color: #43414e;">About me</a></p>
</div>
</td>
</tr>
</tbody>
</table>

 

Link to comment
On 12/2/2020 at 5:41 AM, HeatherLeigh said:

I'm trying to do this too. Site is resumeinsider.net

I added a transparent logo image and added some code to my CSS to overlay the svg version. For some reason, I can see it in the SS backend environment, but it's not appearing on the live site. I suspect that I need CSS that works on Brine and that is what the issue is with the code I added.

Any help would be greatly appreciated!

Your svg url is incorrect. Try using full url

eg: https://beaverhero.com/s/logo-name.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.