Change the Mobile Menu Hamburger Colour

Squarespace uses themes to help your website have a consistent brand and style. However, sometimes these themes can hinder the customization of specific elements.

For example, you can set the colour of links in the mobile menu within the Design Tab in Squarespace. This also sets the colour of the hamburger button. However, depending on the theme or banner image of a page, the colour of the hamburger button might not be visible.

In this video, I show you how to change the colour of the hamburger button sitewide as well as how to set different colours for when the menu is opened and closed. All the code used in the video is provided below.

The following code is used in the video.

Squarespace 7.0

/*Colour When Mobile Menu Closed */
.Mobile-bar-menu {
  stroke: red;
}

/* Colour When Mobile Menu Opened */
.is-mobile-overlay-active .Mobile-overlay-close {
  stroke: red;
}

Squarespace 7.1

Set the Hamburger Button Colour Site Wide

/* Colour of Hamburger Button */
.burger-inner > div {
  background-color: green !important;
}

Set Different Colours for When the Mobile Menu is Closed and Opened

/* Colour When Mobile Menu Closed */
.js-header-burger-close-title[hidden] ~ .burger-box { 
  .burger-inner > div {
  background-color: red !important;
  }
}

/* Colour When Mobile Menu Opened */
.js-header-burger-open-title[hidden] ~ .burger-box { 
  .burger-inner > div {
  background-color: blue !important;
  }
}

Bonus Tip

If you only want to change the colour when the visitor is on a specific page, add the collection id to the front of the code.

Here are some other posts you may like:

• I made the switch from Squarespace 7 to 7.1. Here's what happened to my SEO.

• Create a Pricing Table in Squarespace 7.1

• Remove the Underline from the Read More Blog Link | Squarespace 7.1