CSS: Custom image burger icon in Squarespace

Are you wanting to spice up your Squarespace site? Want it to have a bit more flare and look less generic?

This CSS code will save you! You will need a Business plan or above to add the code and for it to be functional, but it's super quick and will look amazing.

Available file formats to upload; gif, png, jpeg.

Add the below code to your DESIGN > CUSTOM CSS section

.burger {
  background-image: url('INSERT URL HERE');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  background-color: transparent !important;
  height: 45px;
}

.burger-inner {
  display: none;
}

The red sections are where you edit the image and the size. I prefer around 45-50px for the height of my custom image.

If you're wanting to figure out how to upload your image - click on 'MANAGE CUSTOM FILES' and upload your image. Remove INSERT URL HERE text and place the link for your URL in this section.

Then you're done! Enjoy!

Fun trick - always name your code with some lovely forward-back slashes. Otherwise you will have the biggest headache trying to figure out what's what!

For all references and tips, please check out the Squarespace Forum here.