How To Adjust Active and On Hover Navigation Link Color on Squarespace 7.1 Site

 

There is no built-in option to adjust the Active or On Hover Navigation Link Color on 7.1 at this time. While Squarespace is still developing this new version, we can easily adjust this by adding a couple of custom CSS lines to the site.

Navigate to Design > Custom CSS and paste the following code:

/* Nav item color */
.header-nav-item a {
    color: #ff0000 !important;
    transition-duration: 0.4s;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: violet !important;
    transition-duration: 0.4s;
}
/* Nav item active color */
.header-nav-item--active a {
    color: green !important;
}

Simply adjust the Color value to match your site. That’s it!

 
 
 

Have a question? Post it below!

Ervinas33 Comments