How to change mobile menu hamburger Colour on Squarespace 7.1
This tutorial will guide you through the process of changing the color of the mobile menu hamburger on your Squarespace 7.1 site. The provided code is specifically designed for Squarespace 7.1 version. There are various reasons why you may want to modify the color, such as enhancing the overall appearance of your site or making the mobile menu hamburger more noticeable and user-friendly. By following the instructions outlined in this tutorial, you'll be able to customize the color of the mobile menu hamburger on your Squarespace 7.1 site to suit your desired aesthetic and improve the user experience.
Complexity: Easy
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 your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.
This code will work site wide. 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 closed and opened
// 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 your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.
If you wish to change mobile menu hamburger Colour a particular page, you will need to view the page source by simply right mouse click and click on the 'View page Source' option. Look for the body tag which would 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 your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.
