Jump to content

Make navigation links turn red upon hovering

Go to solution Solved by MayaViolet,

Recommended Posts


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:


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!

Link to comment
  • Solution

Try changing the last line of code to the following:


.header-menu-nav-item a:hover div {
    color: red !important;


You can also add a transition property if you'd like the color to fade in and out on hover:


.header-menu-nav-item a:hover div, .header-menu-nav-item a div {
-webkit-transition: .5s;    
-o-transition: .5s;    
transition: .5s;


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

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.