How to change mobile menu hamburger colour on Squarespace 7.1
Customizing the mobile hamburger menu icon is a small but powerful tweak that can significantly improve your Squarespace 7.1 website’s user experience. Whether you're aiming for better contrast, improved usability, or simply a more polished aesthetic, this guide will show you exactly how to change the icon’s colour using CSS.
Table of Contents
Why Change the Hamburger Icon Colour?
Here’s why adjusting the hamburger menu icon can make a meaningful difference:
Improve Visibility: Ensure the icon stands out on both light and dark backgrounds.
Match Your Brand: Align with your brand’s colour palette for a cohesive look.
Enhance UX: Clear, visible navigation boosts usability on mobile.
Polish Your Design: Small visual tweaks help your site look professionally designed.
Complexity: Easy
How to Change the Hamburger Icon Colour
Step 1:To change mobile menu hamburger colour, simply copy the code below:
Sets the Hamburger Menu Colour site wide.
// Hamburger Menu Colour // .burger-inner > div { background-color: #FFBF00 !important; }
From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
This code will work site wide.
Step 2: To change mobile menu hamburger colour when you open and close the menu, simply use the code below:
Sets different colours for when the mobile menu is opened and closed.
// Hamburger Menu Colour Closed // .js-header-burger-close-title[hidden] ~ .burger-box { .burger-inner > div { background-color: #000 !important;} } // Hamburger Menu Colour Opened // .js-header-burger-open-title[hidden] ~ .burger-box { .burger-inner > div { background-color: #fff !important;} }
From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
Step 3: If you wish to change mobile menu hamburger colour on a particular page, you will need to view the page source and simply right mouse click and click on the 'View page Source' option. Look for the body tag which will look something like this: <body id=”collection-5f0748fced03a8025828eee7 (see image below).
Copy the ID (collection-5f0748fced03a8025828eee7).
The code below is what you will use to change mobile menu hamburger colour on a particular page.
// Hamburger Menu Colour for particular page // #collection-5f0748fced03a8025828eee7{ // Hamburger Menu Colour Closed // .js-header-burger-close-title[hidden] ~ .burger-box { .burger-inner > div { background-color: #000 !important;} } // Hamburger Menu Colour Opened // .js-header-burger-open-title[hidden] ~ .burger-box { .burger-inner > div { background-color: #fff !important;} } }
From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
Replace the colour values (#000, #fff) with your own.
Key Takeaways
Change your hamburger menu colour to match your brand or improve visibility.
Use one line of CSS to apply a global change.
Use advanced CSS to differentiate icon colour when the menu is opened vs closed.
Enhances design consistency and mobile user experience in under 5 minutes.
FAQs
Can I animate the hamburger icon colour change?
Not with this method. For animation, you'd need more advanced code including JavaScript — not officially supported in Squarespace.
Does this work with all Squarespace 7.1 templates?
Yes! This CSS method works across all 7.1 templates.
Can I use colour names or rgba() instead of hex codes?
Yes. You can use hex, RGB, RGBA, or named colours like white, black, etc.
Conclusion
Customising the mobile menu hamburger icon on your Squarespace 7.1 site is a quick, easy way to enhance visual design and usability — especially for users navigating your site on smaller screens.
With just a few lines of CSS, you can ensure that your navigation remains clear, branded, and accessible across all devices.
