How To Customize Mobile Menu Arrows in Squarespace

Want to give your Squarespace mobile menu a fresh new look? In this quick tutorial, I’ll show you how to add a custom background image that appears only when your mobile menu is open. It’s a simple change with a big visual impact—and you don’t need to be a CSS pro to make it happen.

Watch the video below to follow along step-by-step, then scroll down to grab the code and customize it for your own site.

🧑‍💻 Copy + Paste Code for Mobile Menu Arrows

Below is the exact code from the tutorial. You’ll paste this into the Custom CSS in your Squarespace site. It updates the arrow icons and styles the "Back" label in your mobile folder menus.

/* forward arrow */
.header--menu-open .header-dropdown-icon:after{
content:"→";
color: purple
}
/* back arrow */
.header--menu-open [data-action="back"] .header-dropdown-icon:after {
content:"←";
color: green
}
/* change the BACK text color & style */
.header-menu-controls-control span{
  color:green!important;
  text-transform:uppercase;
}

💡 How This Code Works

Let’s walk through what each part is doing so you can customize it confidently. Be sure to check out the Unicode character list to copy a unique symbol for the codes below!

---

Forward Arrow

This selector targets the arrow next to any dropdown folder in your mobile menu when it’s open. We’re replacing the default icon with a new Unicode arrow (→) using the content property. You can swap it for any other Unicode character that fits your style. The color: purple part changes the arrow to—yep—purple. You can use any color name or hex code here.

/* forward arrow */
.header--menu-open .header-dropdown-icon:after {
  content: "→";
  color: purple;
}

---

Back Arrow

This one is for the back arrow that shows at the top of the menu when you're inside a folder. Again, we’re swapping out the default icon for a custom one (←) and changing the color to green.

/* back arrow */
.header--menu-open [data-action="back"] .header-dropdown-icon:after {
content:"←";
color: green
}

---

Styling the “Back” Text

This targets the word “Back” next to that arrow. In the video, I made it green to match the icon, forced it to uppercase, and that’s it! If you want to get fancy, you can also add font-size, letter-spacing, or other style rules to this selector.

Check out the free font & text property guide for more creative code ideas you can use for this text.

/* change the BACK text color & style */
.header-menu-controls-control span{
  color:green!important;
  text-transform:uppercase;
}

---