Jump to content

How to Upload a SVG Header Logo?

Recommended Posts

  • Replies 2
  • Views 2.3k
  • Created
  • Last Reply

1. On your computer:

  • Create your SVG logo
  • Name it logo.svg for convenience
  • Create a transparent PNG file that has the same dimensions as your SVG logo
  • Name it anything you want

2. On your Squarespace:

  • Go into Edit mode
  • Hover over header
  • Select 'Edit Site Header'
  • Click on 'Site Title & Logo'
  • Upload the transparent PNG file into 'Logo Image'
  • Do not upload anything into 'Mobile Logo Image'; leave it blank
  • Save all changes
  • Exit Edit mode

3. On your Squarespace:

  • Go into Edit mode in any page
  • Create a text block
  • Type any word
  • Highlight it
  • Select 'Link' in the toolbar
  • Click on the gear icon
  • Click on 'File' in the left sidebar
  • Upload your SVG logo
  • Hit 'Save'
  • Exit Edit mode without saving

4. On your Squarespace:

  • Go to 'Design'
  • Click on 'Custom CSS'
  • Enter the following CSS code into the section:
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://your_domain_name.com/s/logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
  • Hit 'Save'
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.