Jump to content

Need help changing color of hamburger menu icon for mobile

Recommended Posts

Hello, I am wanting to change the color of the hamburger menu icon to white, as you can see in the photo, it is a brown/grey color. I want to do this while not affecting the color of anything else. Could someone provide me with the code or instructions to do so?

 

Thanks!

Screen Shot 2022-12-20 at 1.32.20 PM.png

Screen Shot 2022-12-20 at 1.34.51 PM.png

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

16 hours ago, EJ119 said:

Hello, I am wanting to change the color of the hamburger menu icon to white, as you can see in the photo, it is a brown/grey color. I want to do this while not affecting the color of anything else. Could someone provide me with the code or instructions to do so?

 

Thanks!

Screen Shot 2022-12-20 at 1.32.20 PM.png

Screen Shot 2022-12-20 at 1.34.51 PM.png

Can you share your URL site so I can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

You can use the following code on Home > Design > Custom Css

.header-burger-btn.burger {
  --gradientHeaderNavigationColor: #fff;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.50fece5588972042d0874488f3023b68.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 12/27/2022 at 9:25 AM, EJ119 said:

https://www.sullivandesignstudio.com/

I tried copying and pasting the code but it says there is a syntax error. 

Screen Shot 2022-12-26 at 6.24.57 PM.png

Try remove Line 54 to Line 56.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 12/27/2022 at 9:25 AM, EJ119 said:

https://www.sullivandesignstudio.com/

I tried copying and pasting the code but it says there is a syntax error. 

Screen Shot 2022-12-26 at 6.24.57 PM.png

I can not see the value we need to set for the Css variable.

image.thumb.png.ed750e9ee58327df1893b34f57869bdb.png

The correct is:

  --gradientHeaderNavigationColor: #fff;

 

Edited by Beyondspace

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
On 1/13/2023 at 12:03 PM, EJ119 said:

Tried and still says there is an error.1495511201_ScreenShot2023-01-13at12_02_57AM.png.e4b15b60f42ef835ab5904480f4d2021.png

Try remove line 54 - 56

Add this code to Settinsg > Advanced > Code Injection > Footer

<style>
  .header-burger-btn.burger {
  --gradientHeaderNavigationColor: #fff;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.