Change the Hamburger Button Colour

What does this code do?

This code snippet will allow you to change the color of the hamburger button in the mobile menu.

Code Snippets

Copy and paste this code into Design > Custom CSS

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;
}

If you only want to change the colour on one page than use the following code instead.

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

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

Squarespace 7.1

To have the same colour when closed and open use the following code.

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

To have different colours when closed and open use the following code.

/* 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;
  }
}

If you only want to change the colour on one page than use the following code instead.

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

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

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

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a collection id check out our Start Here guide.

3. You can use a word, rgb, or hex code for the color.