Hamburger menu color change upon hover - seeking CSS

Site Password: catbird

Howdy! I've added CSS to a site to force the mobile menu to appear on the desktop view. Things are working great and I've further customized the navigation size and spacing. My client asked if changing the hamburger from black to red when it is hovered over would be possible.

This was my feeble attempt at some CSS to make that happen (it didn't work):

/* Hamburger Hover Color */
.header-burger a:hover {
    color: #ff524a !important;
}

Here is the other CSS I have going, in case that matters:

.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}
.header-menu-nav-item {line-height: 25px!important;}

/* Navigation Font Size */
.header-menu-nav-item a {
  font-size: 35px !important;
}

/* Hide 'View Event' button */
a.eventlist-button.sqs-editable-button.sqs-button-element--primary {
  display: none;
}
/* desktop menu spacing */
@media screen and (min-width:768px) {
.container.header-menu-nav-item a {
    margin-top: 15px;
    margin-bottom: 15px;
}
}

Thanks to anyone who can point me in the right direction!

Thanks so much - that worked perfectly!

A follow-up question: is there a way to make the navigation links turn red upon hovering? 

I tried:

/* Nav item hover color */
.header-nav-item a:hover {
    color: red !important;
}

but it didn't seem to do anything. Thanks!

What is site url? We can check easier

Yes a URL will help solve the issue...

Your CSS code should work, but more than likely its not because of another line somewhere conflicting the css...

Thanks! Seems likely that the other CSS I have is creating a conflict.

Here is the site link: https://emu-caribou-zf2g.squarespace.com/

Password is: catbird

On 7/10/2023 at 1:53 AM, Triskelion27 said:

A follow-up question: is there a way to make the navigation links turn red upon hovering? 

I tried:

/* Nav item hover color */
.header-nav-item a:hover {
    color: red !important;
}

but it didn't seem to do anything. Thanks!

Your code is for Desktop Nav Item. Currently you are using Burger Menu items, so you will need this CSS

div.header-menu-nav-item:hover div {
    color: red;
}