How to use an image for your Squarespace mobile menu icon

mobile

Sep 29

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!

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
}