How to Replace the Mobile Menu Icon with Text in Squarespace

The #1 rule of web design is to “Keep it simple.” Something as simple as replacing an ambiguous hamburger menu with a much more clear “Menu” label is an easy way to make navigating your mobile site a good experience for your users.

In this tutorial, I will show you how to replace hamburger icons with text on both Squarespace 7.0 Brine Family Templates and all Squarespace 7.1 templates.

Things to know before using this solution:

• The 2 solutions offered in this blog post work on all 7.1 templates and 7.0 Brine family templates

• You must have a Squarespace Business plan or higher in order to add custom code to your site

7.0 Brine Family Code Snippet

CSS Code Snippet

Add this code snippet in Design > Custom CSS. You can change the “Menu” text to say something more conducive to your needs, but make sure to only change the text between the quotation marks.

Copy /* Start: Replace menu icon with text */ button.Mobile-bar-menu:after { content: "Menu"; background: black; padding: 8px; border-radius: 6px; color: #ffffff; vertical-align: text-top; } .top-right { display: flex; align-items: center; } /* End: Replace menu icon with text */

7.1 Code Snippet

CSS Code Snippet

Add this code snippet in Design > Custom CSS. You can change the “Menu” and “Close” text to say something more conducive to your needs, but make sure to only change the text between the quotation marks.

Copy /* Start: Replace menu icon with text */ button:not(.burger--active) .burger-box:after { content: "Menu"; background: black; /* Background color of button */ padding: 8px; border-radius: 6px; color: #ffffff; /* Color of button text */ } button.burger--active .burger-box:after { content: "Close"; background: black; /* Background color of button */ padding: 8px; border-radius: 6px; color: #ffffff; /* Color of button text */ } .burger-inner { display: none; } /* End: Replace menu icon with text */

If you enjoyed this tutorial, subscribe to my email list to make sure you don’t miss out on other Squarespace tips and tricks!