How to Change the Hamburger Icon on Your Squarespace Site

Option 1: Squarespace’s built-in choices

Squarespace offers a built-in setting to adjust the style of your hamburger menu icon. You can change its color using Site Styles when previewing in mobile view. Simply access the color palette for your header and update the menu icon color. This change applies across pages that use the selected palette. This is ideal for quick tweaks and stays fully within Squarespace’s visual editor.

But for a truly unique and branded touch, you can replace the default icon entirely with your own custom images using code. Here is how.

---

Option 2: Custom Hamburger Icon with Your Own Images

Use the following code to implement a fully custom icon that changes depending on whether the menu is open or closed. Insert your own image URLs and adjust styling as needed.

---

Step 1: Add This Custom CSS in Design → Custom CSS:

/* Custom hamburger icon styling */
.burger {
  position: relative;
  display: inline-block;
  background-image: url('YOUR_HAMBURGER_ICON_URL');
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: right;
}

/* Hide the default inner icon bars */
.burger-inner {
  display: none !important;
}

/* Switch icon when menu is open */
.header--menu-open .burger {
  background-image: url('YOUR_CLOSE_ICON_URL');
}

/* Adjust brightness for light or dark icon versions */
.burger {
  filter: invert(0);
}
.header--menu-open .burger {
  filter: invert(0);
}

Replace YOUR_HAMBURGER_ICON_URL with your custom icon URL such as a house icon and YOUR_CLOSE_ICON_URL with the URL of the close icon you want displayed when the menu is open. Customize background-size background-position and filter for brightness adjustments.

---

Step 2: Customize to Fit Your Brand

Here is how you can easily personalize the look

1. Icon Images
   Use any hosted image preferably SVG or optimized PNG.
   Ensure both URLs are valid and accessible.

2. Adjust Size
   Change background-size: 35px to your preferred dimensions such as 50px for larger or 20px for smaller.

3. Align Icon
   Modify background-position: right as needed. You can also use center or left to adjust placement.

4. Set Brightness
   Use filter: invert(0) for dark icons or invert(1) for light versions.
   You can set different filters for each state .burger and .header--menu-open to suit varying backgrounds.

---

Step by Step Recap

1. Upload your custom icons and copy their URLs.

2. Open Design → Custom CSS and paste in the code above.

3. Replace placeholder URLs with your own and adjust size position and brightness.

4. Save and preview on both mobile and desktop to confirm the icon switches correctly when toggling the menu.

---

Using this method you will transform your Squarespace site with a personalized branded hamburger icon that enhances user experience and design coherence without relying on third party plugins.

---

Want a custom tutorial or have a burning question?

Tell me what topics you’d like me to cover. Your input helps shape the content here at ByKatss, so don’t be shy. Fill out the form and I’ll get to work on your request.