Triskelion27

Brilliant, thank you MayaViolet!

Greetings, I hope to get my navigation menu text to turn red when hovered over. I have some other CSS running that may conflict with the code I tried. The site can be found here: https://emu-caribou-zf2g.squarespace.com/ Password: catbird And here is the CSS I currently have added: .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: 20px !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; } } /* Hamburger Hover Color */ .burger-inner:hover .top-bun, .burger-inner:hover .patty, .burger-inner:hover .bottom-bun {background-color:red !important;} /* Nav item hover color */ .header-nav-item a:hover { color: red !important; } Thanks for any insight here!

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

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!

Thanks so much - that worked perfectly!

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!