Creative customizations for your mobile menu icon

mobile

Dec 24

The standard "burger" menu works fine, but why not make it a visual highlight of your site? In this tutorial, you’ll learn some creative ways to customize your mobile menu icon! You’ll learn how to:

Add a background shape behind your mobile menu icon.
Change the colors and shapes of the icon lines.
Replace the default menu icon with your own custom image.

As always, you’ll find all the code snippets below. Let’s get started!

Add a Background Shape to Your Mobile Menu Icon

First, we’ll create a circular background for your mobile menu icon. Navigate to your Custom CSS panel in Squarespace:

Go to Pages > Website Tools > Custom CSS.
Paste the following code. This code creates a perfect circle with a 1:1 ratio and an orange background. Want to change the color? Replace orange and #fff with any web-safe color name, hex code, or RGBA value.

/* circular mobile menu icon code from insidethesquare.co */
.burger{
  background: orange;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}
.top-bun, .patty, .bottom-bun{
  background: #fff!important
}

Change the Colors of the Icon Lines

The mobile menu icon’s lines—also known as top bun, patty, and bottom bun (kudos, Squarespace)—can each have a unique color. Add this code to customize them individually! Make sure you replace red, green, and blue with the colors you want for the top, middle, and bottom lines. You can use web-safe names, hex codes, or RGBA values to get the perfect match.

/* multicolor mobile menu icon code from insidethesquare.co */
.top-bun {background:red!important}
.patty {background:green!important}
.bottom-bun {background:blue!important}

Round the Corners of the Icon Lines

If the sharp corners of the lines don’t vibe with your circle background, smooth them out with this code. This tiny tweak can make a big difference, giving your icon a softer, more polished look.

/* rounded mobile menu icon line code from insidethesquare.co */
.top-bun, .patty, .bottom-bun {
border-radius:5px}

Replace the Menu Icon with a Custom Image

Want to go beyond colors and shapes? You can use your own images for the open and close states of the mobile menu. Here’s how:

Navigate to the Custom Files section in the CSS panel.
Upload two images: one for the open state and one for the close state.
Replace OPEN_ICON_URL and CLOSE_ICON_URL with the file URLs of your uploaded images. Squarespace will automatically provide the URLs when you select your files.

💡 Pro Tip: Use square images (1:1 ratio) to ensure they fit perfectly.

/* custom mobile menu icon code from insidethesquare.co */
.burger-inner {
 display: none;
}
.burger {
 background-image: url(open-icon);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: right;
 background-color: transparent !important;
}
.burger--active{
 background-image: url(close-icon)
}

Thank you so much for following along! I hope you found this tutorial helpful and inspiring. If you enjoyed it, you can BuyMeACoffee to say thanks & support my blog! You’ll also find other related tutorials below. Have fun with your Squarespace website.