Seeking CSS to update color of hamburger menu on hover-over

Site URL: https://lightsandtracks.squarespace.com/

I'm trying to update the color of my hamburger menu on hover over similar to the behavior seen on the site at: https://lightsandtracks.squarespace.com/. I'm not skilled enough to extract the hover over CSS from this site. Maybe someone can help me with that?

I can't reveal our site's URL but I have figured out the CSS to update the color of the hamburger menu, either (1) or (2) below:

(1)

.burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun {
    background-color: white!important;
}

(2)

.burger-inner>div {
    background-color: white !important;
}

Then I tried the following to update the color to red on hover over, but it only updates the color of each of the horizontal lines of the hamburger menu but not all three at once:

.burger-inner>div:hover {
    background-color: red !important;
}

If someone can suggest what CSS I can use to update the color all 3 sections of the hamburger menu on hover over I'd love to know.

7 hours ago, wonderwebber said:

Site URL: https://lightsandtracks.squarespace.com/

I'm trying to update the color of my hamburger menu on hover over similar to the behavior seen on the site at: https://lightsandtracks.squarespace.com/. I'm not skilled enough to extract the hover over CSS from this site. Maybe someone can help me with that?

I can't reveal our site's URL but I have figured out the CSS to update the color of the hamburger menu, either (1) or (2) below:

(1)

.burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun {
    background-color: white!important;
}

(2)

.burger-inner>div {
    background-color: white !important;
}

Then I tried the following to update the color to red on hover over, but it only updates the color of each of the horizontal lines of the hamburger menu but not all three at once:

.burger-inner>div:hover {
    background-color: red !important;
}

If someone can suggest what CSS I can use to update the color all 3 sections of the hamburger menu on hover over I'd love to know.

The above link is your desired result you want to achieve, isn't it?

How about the site you want to apply this? It could be easier if you can share your site with the protected password to find the solution

.header-menu-nav-item a:hover {
    color: #ff524a !important;
}

a:hover {
    color: #ff524a !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.header-menu-nav-item a:hover::after {
    content: '→' !important;
    font-size: 3.2rem;
    color: #ff524a;
    font-family: 'FunktionalGrotesk-Book';
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    opacity: 1 !important;
}

After using the dev tool in this site https://lightsandtracks.squarespace.com/, i think this is the configuration to set hover effect.

Still need to know your site to find the way to set it on your own

Hi bangank36 - Thanks for your offer to help.

I have a site that I'm able to share. It is at: https://crimson-armadillo-4gj9.squarespace.com/ with password: secret

On this site, the hamburger menu is red when you're at the top of the page and white when you scroll down the page. I'd like to know how to update the color of the hamburger menu when you hover over it - let's say - update its color to green. When the mobile menu is showing, I'd also like to know how to up the color of the "X" on hover over

Thanks in advance for your help with this!

On 10/26/2021 at 8:03 AM, wonderwebber said:

Hi bangank36 - Thanks for your offer to help.

I have a site that I'm able to share. It is at: https://crimson-armadillo-4gj9.squarespace.com/ with password: secret

On this site, the hamburger menu is red when you're at the top of the page and white when you scroll down the page. I'd like to know how to update the color of the hamburger menu when you hover over it - let's say - update its color to green. When the mobile menu is showing, I'd also like to know how to up the color of the "X" on hover over

Thanks in advance for your help with this!

You mean change X color when overlay menu is active??

Hi tuanphan - Thanks for checking in. When I hover-over the hamburger menu or the "X" (when the mobile menu is showing), I would like the color of each of these to be updated from red to green.