How to replace your mobile menu icon with text in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

You can replace your mobile menu icon with custom text in Squarespace and this tutorial will teach you how, step by super simple step!

The trick with this code is to keep the button functionality, but loose the graphics.

We’ll be using some custom CSS to hide the burger and add some text instead.

Here are the codes from this tutorial:

This code will hide the burger:

.burger-inner{display:none}

This code will add your text and give it a border:

.burger-box:before{content:"MENU"; border: 1px solid #000; padding: .25rem}

This code will create custom close text:

.burger--active .burger-box:before{content:"CLOSE"}