Replace the Hamburger Icon with a Word | Squarespace 7.1

What does this code do?

This code snippet will allow you to hide the hamburger icon in the mobile menu and replace it with a word.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Replace Hamburger Icon */
.js-header-burger-close-title[hidden] ~ .burger-box {
  .burger-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .burger-inner * {
    display: none !important;
  }
  .burger-inner::after {
    content: "MENU";
    color: white; // color of the text
    font-size: 1rem; // size of the text
  }
}

Then change the word MENU to a word of your choice.

How To Use It

1. Copy and paste the code as indicated above.

2. Then change the word MENU to a word of your choice.