How to use an image for your Squarespace mobile menu icon

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About This Tutorial

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

In this tutorial, we're diving into the world of custom CSS to replace that standard mobile menu icon with an image of your choice.

If you’re new to code, you’re in the right place. I'll walk you through every step, from uploading your image to tweaking the CSS for perfect placement.

Whether you're a small business owner looking to strengthen your brand or a creative wanting to add some extra flair, this simple hack will take your Squarespace site from great to unforgettable.

You'll find the codes & related resources below, but the image you use for your mobile menu icon will make a difference in the code you'll need. Make sure you watch the tutorial so you know which code to use and how to customize it!

Squarespace Tutorial

---

Code Example

Here are the codes from this tutorial. There are two options - one for a square image and one for a rectangle. Be sure to use the correct code for your image ratio:

/* Tutorial Code - Square Image */
.burger-inner{
  opacity: 0
}
.burger-box{
  background-image: url(image-url-here);
  background-size: cover;
}
.burger--active .burger-box {
  background-image: none!important
}
.burger--active  .burger-inner {
  opacity: 1
}

/* Tutorial Code - Rectangle Image */
.burger-inner{
  opacity: 0
}
.burger-box{
  background-image: url(image-url-here);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.burger--active .burger-box {
  background-image: none!important
}
.burger--active  .burger-inner {
  opacity: 1
}

---

Related Content

📺 Tablet view workshop → insidethesquare.co/tablet

📚 Squarespace CSS Code Collection → insidethesquare.co/css

🙋‍♀️ Code troubleshooting tips →insidethesquare.co/code-help