How to Replace the Mobile Menu Icon with Custom Text in Squarespace 7.1

Want your mobile navigation to look more personal or branded? Instead of showing the default hamburger icon, you can display custom menu text—like “Menu =” and “Close x”—that better fits your style or improves clarity.

This tweak uses a bit of CSS and works perfectly with Squarespace 7.1. It’s ideal for designers, creatives, or business owners who want a clean, readable alternative to the default burger icon.

---

Why Replace the Burger Icon with Text?

While the hamburger menu is standard, not all users recognize it instantly—especially older audiences or less tech-savvy visitors. Replacing it with clear, labeled text like “Menu” and “Close” improves user experience and adds a custom design touch.

---

CSS Code to Replace the Mobile Menu Icon

Paste the following code into your Custom CSS section in Squarespace:

css
// REPLACE MOBILE MENU BURGER ICON WITH TEXT - GHOSTPLUGINS.COM  //

@menu-icon-text-closed: "Menu =";
@menu-icon-text-closed-color: #000;

@menu-icon-text-open: "Close x";
@menu-icon-text-open-color: #000;

@menu-icon-text-size: 15px;
@menu-icon-text-weight: normal;
@menu-icon-font-family: inherit;

@menu-icon-text-width: 50px;
@menu-icon-text-height: 20px;

/* --- Do Not Edit Below ---- */

.burger-box:after {
  content: @menu-icon-text-closed;
  text-align: right;
  font-size: @menu-icon-text-size;
  color: @menu-icon-text-closed-color;
  display: block !important;
  font-family: @menu-icon-font-family !important;
}
.header--menu-open .burger-box:after {
  content: @menu-icon-text-open;
  color: @menu-icon-text-open-color;
}
.burger-box {
  width: @menu-icon-text-width !important;
  height: @menu-icon-text-height !important;
}
.burger-box div {
  display: none;
}
.header .header-burger {
  flex: 0 0 @menu-icon-text-width !important;
}

// REPLACE MOBILE MENU BURGER ICON WITH TEXT - GHOSTPLUGINS.COM  //

---

What Can You Customize?

This plugin is fully flexible! You can change:

• Closed Menu Text: Set your own label like "Menu", "Open", or "☰ Menu"

• Open Menu Text: Show something like "Close", "×", or "Hide Menu"

• Text Color: Match your brand’s palette

• Font Family & Weight: Use your site's font or override it

• Text Size and Width: Make it fit better with your layout

These values are defined in the first few lines of the code, so feel free to update them as needed.

---

Final Thoughts

Replacing the mobile burger icon with text is a smart move if you want more clarity, better usability, or a touch of branding in your navigation. It’s especially useful for minimal websites or accessibility-conscious designs. Try this quick CSS tweak and give your mobile menu a modern, user-friendly update.

---

Need Help with Your Squarespace Website?

Want to improve your website's design, SEO, or add custom features? Work with a proven Squarespace expert trusted by 200+ clients.

👉 Visit My Portfolio

📞 Message me directly on WhatsApp: https://wa.me/+8801717691382
📅 Book a free consultation on Calendly: https://calendly.com/website_consultation/meeting

Let’s bring your website vision to life — professionally and on time.