Navigation

How do I style the mobile hamburger menu icon in Squarespace?

The hamburger icon in Squarespace 7.1 is built with the .header-burger element, which contains line elements that make up the three bars. You can change their color, thickness, and spacing.

The icon also has an open state when the mobile menu is active. Style both states so the close (X) icon matches your design too.

/* Hamburger icon lines */
.header-burger .burger-line {
  background-color: #ffffff !important;
  height: 3px !important;
  width: 28px !important;
}

/* Spacing between lines */
.header-burger {
  gap: 6px !important;
}

/* Change color when menu is open */
.header-menu-nav-open .header-burger .burger-line {
  background-color: #333333 !important;
}

Customize your mobile menu with our Nav Customizer toolTry it free →

Related Questions

How do I change the dropdown menu background color in Squarespace?

How do I add an active page indicator to the navigation in Squarespace?

How do I change the navigation font size in Squarespace?

How do I hide a specific navigation link in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Talk to Long Drive Marketing →