How To Change the Hamburger Menu Icon Colour [Two Options]
Did you know you can change the colour of your hamburger menu icon on Squarespace?
In fact, there are two ways to do it. You either change the colour within a palette, or just on one individual page. Handy!
In this guide I’ll talk you through both options.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
To change the colour of your hamburger menu icon within a certain palette, head to Site Styles > Colours and switch to mobile view.
Head to the colour palette for the header, hover over and click on your burger menu and select Navigation Links from the edit panel.
Here you’ll be able to change the colour for that palette, changing the colour of the burger menu icon on every page that uses that palette.
If however you just want to change the colour on an individual page, head to Website > Website Tools > Custom CSS and add the following code:
.burger-inner > div {
background-color: #fafafa !important;
}
You can obviously change the colour within the code, using a hex code etc.
To get this on just one page, we need to wrap the code in the collection ID for the burger menu icon we want to change.
To get the collection ID use your Squarespace Block ID Finder Chrome plugin and copy the collection ID for your page header. Paste this in front of your code in your custom CSS box.
It would look something like this:
#REPLACE-COLLECTION-ID {
.burger-inner > div {
background-color: #fafafa !important;
}
Once you’re happy with the colour of your hamburger menu icon, hit save. Job done!
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
