Jump to content

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

Recommended Posts

Posted

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. 

 

  • Replies 2
  • Views 1.4k
  • Created
  • Last Reply
Posted
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.