Changing the Hamburger Menu Icon (.svg)

This one requires a few steps, but totally possible!

Upload SVGs onto your site

Unfortunately, there currently isn’t an easy way to upload SVG images, so this is going to be a process!

  1. Have your SVG file ready. You can right-click this link and select Save Link As to save the ilovecreatives-hamburger-menu.svg to your computer. You can also find a ton of SVGs on the Noun Project

  2. Open your style guide page (or really any page because you can delete this later) and type “whatever” in a text block. It doesn’t matter what word you type, we just need a way to create a text link

  3. Highlight the text you just wrote and hit ⌘K. Alternatively, you can click the 🔗 icon in the text editor

  4. In link settings, select Files and upload your SVG file. Make sure you select the svg, hit Save, and Apply (see example on the right)

  5. Your link should look like this: whatever

  6. Right-click that link and select Copy Link Address. Save this URL - you’ll need it for the next step (see “replace with your svg URL” in the CSS)

Step 4 Example - Upload .svg file

 

Copy and Paste CSS

7.0

/* Hamburger Menu — Mobile */

.Mobile-bar-menu {
  background-image: url('https://ilovecreatives.com/s/ilovecreatives-hamburger-menu.svg'); /*replace with your SVG URL*/
  background-size: contain;
  background-repeat: no-repeat;
  height: 20px; /*adjust based on image*/
  width: 30px; /*adjust based on image*/
}

.tweak-mobile-bar-menu-icon-hamburger .Mobile-bar-menu .Icon--hamburger {
    display: none;
}

7.1

/* Hamburger Menu — Mobile */

.burger {   
  background-image: url('https://ilovecreatives.com/s/ilovecreatives-hamburger-menu.svg'); /*replace with your SVG URL*/
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  background-color: transparent !important;
  height: 20px; /*adjust based on image*/
  width: 30px; /*adjust based on image*/
}  

.burger-inner {   
    display: none; 
}
 

I don’t see my icon!

Double check that your URL for your SVG icon is correct. When you copy CSS from the Developer Tools, the URL is truncated automatically. The best way to find out is to open the URL in a new window and see if your image shows up.

NOTE: if your site is in Trial Mode, you might not be able to see your icon. This is because Squarespace doesn’t allow external access to uploaded files on trial sites. When you upgrade your site to a paid plan, you’ll be able to see your SVG! For more info check out this forum.

Why can’t I just add an SVG into CSS > Manage Custom Files

It seems like Manage Custom Files only accommodates Images (JPG, GIF, PNG) and Font files, but we’ve definitely requested for Squarespace to add this feature!

Code SnippetsPunoSection 3 - Custom Sites