Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Seeking CSS to update color of hamburger menu icon on scrolling down the page


Question

Site URL: https://sswebdev-one.squarespace.com/

The password for our site at: https://sswebdev-one.squarespace.com/ is: secret

On the "Initiatives" (https://sswebdev-one.squarespace.com/initiatives) and "Contact" (https://sswebdev-one.squarespace.com/contact-us) pages of our website the hamburger menu icon is red when we're at the top of the page.  (in a narrow browser or on a phone)

I would like to update the color of the hamburger menu to white when you scroll down the page.  I have defined the following CSS but it doesn't seem to be working as the hamburger menu remains red on scrolling:

#collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 {
    .tweak-fixed-header .shrink.header .burger-inner > div {
        background-color: white!important;
    }
}

If you have any suggestions on how I can achieve the change in color of the hamburger menu icon on scroll I'd appreciate your feedback. 

 

Link to comment

2 answers to this question

Recommended Posts

  • 0
12 hours ago, wonderwebber said:

Site URL: https://sswebdev-one.squarespace.com/

The password for our site at: https://sswebdev-one.squarespace.com/ is: secret

On the "Initiatives" (https://sswebdev-one.squarespace.com/initiatives) and "Contact" (https://sswebdev-one.squarespace.com/contact-us) pages of our website the hamburger menu icon is red when we're at the top of the page.  (in a narrow browser or on a phone)

I would like to update the color of the hamburger menu to white when you scroll down the page.  I have defined the following CSS but it doesn't seem to be working as the hamburger menu remains red on scrolling:

#collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 {
    .tweak-fixed-header .shrink.header .burger-inner > div {
        background-color: white!important;
    }
}

If you have any suggestions on how I can achieve the change in color of the hamburger menu icon on scroll I'd appreciate your feedback. 

 

did you try this

.tweak-fixed-header .header .burger-inner>div,
.header--menu-open.tweak-fixed-header header.header .burger-inner>div {
  background-color: red !important;
}
.tweak-fixed-header .shrink.header .burger-inner>div {
    background-color: #fff !important;
}

image.png.ca01ecf00121da17419dc502afa2f37e.png

image.png.fe9294581aa4efe71d4b490d1a35482c.png

image.png.f2c885ce1d03c63efe5910b043cdb497.png

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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

Create an account or sign in to comment

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

×
×
  • Create New...