Square Hamburger Menu

Look Demo

Turn the mobile hamburger menu into a gradient square. This plugin uses css editor and works the Brine template family.


How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Gradient Square Hamburger //

.Mobile-bar-menu .Icon {
  background: #000000 !important;
  padding: 30px;
  border-radius: 0%;


Adjust the background color and padding to your liking. To change the color of the hamburger icon, go to the Site Styles settings.

If you want the mobile hamburger menu to show on desktop, set the mobile breakpoint to 3000px in Site Styles.


No notes.

Moov Labs