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 on hover-over


wonderwebber

Question

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.

Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0
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

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

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
  • 0

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!

Link to comment
  • 0
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??

Email me if you have need any help (free, of course.). Answer within 24 hours.

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