Replace the Hamburger Icon with a Word | Squarespace 7.0

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. It is compatible with the Brine Family Templates in Squarespace 7.0.

Note: If you are working in Squarespace 7.1, try this code snippet. If you are working in the Wexley Template, try this code snippet.

Code Snippets

Copy and paste this code into Design > Custom CSS

Brine Family Template

/* Replace Hamburger Icon */
[data-nc-container="top-right"] {
  position: relative;
  right: -10vw; /* moves container to the right */
}
.Mobile-bar-menu {
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.Mobile-bar-menu::before {
  content: "MENU";
  visibility: visible;
}

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

Bedford Family Template

/* Replace Hamburger Icon */
.force-mobile-nav:not(.mobile-nav-open){
    .mobile-nav-toggle {
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .mobile-nav-toggle::before {
    content: "MENU";
    visibility: visible;
  }
}

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.