In this post, I will share some custom code to change color for Navigation Link, Hover Link and Active Link.

Notes

• Add !important to after if the code doesn’t work. Eg: color: red !important;
• Add code to Home > Design > Custom CSS
• Send me a message if you have any questions/the code doesn’t work.

Avenue

/* Nav item color - underline */
.main-nav ul li a {
    color: #ff0000 !important;
}
/* Nav item hover color - underline */
.main-nav ul li a:hover {
    color: violet !important;
}
/* Nav item active color - underline */
.main-nav ul li.active-link a {
    color: green !important;
}

Aviator

/* Nav item color - underline */
nav#main-navigation ul li a {
    color: #ff0000 !important;
}
/* Nav item hover color - underline */
nav#main-navigation ul li a:hover {
    color: violet !important;
}
/* Nav item active color - underline */
nav#main-navigation ul li.active-link a {
    color: green !important;
}

Bedford: Anya, Bedford, Bryant, Hayden, Bedford

/* Nav item color - underline */
#mainNavigation div a {
    color: #ff0000 !important;
}
/* Nav item hover color - underline */
#mainNavigation div a:hover {
    color: violet !important;
}
/* Nav item active color - underline */
#mainNavigation div.active a {
    color: green !important;
}

Brine: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine.

/* Nav item color - underline */
.Header-nav-item {
    color: #ff0000 !important;
}
/* Nav item hover color - underline */
.Header-nav-item:hover {
    color: violet !important;
}
/* Nav item active color - underline */
.Header-nav-item--active {
    color: green !important;
}

Farro: Farro, Haute

Same as Brine

Five

/* Nav item color - underline */
nav#main-navigation ul li a {
    color: #ff0000 !important;
}
/* Nav item hover color - underline */
nav#main-navigation ul li a:hover {
    color: violet !important;
}
/* Nav item active color - underline */
nav#main-navigation ul li.active-link a {
    color: green !important;
}

Flatiron

/* Nav item color - underline */
ul#nav li a {
    color: #ff0000 !important;
}
/* Nav item hover color - underline */
ul#nav li a:hover {
    color: violet !important;
}
/* Nav item active color - underline */
ul#nav li.active-link a {
    color: green !important;
}

Forte

/* Nav item color - underline */
#topNav ul li a span {
    color: #ff0000;
}
/* Nav item hover color - underline */
#topNav ul li a:hover span {
    color: violet;
}
/* Nav item active color - underline */
#topNav ul li.active-link a span {
    color: green !important;
}

Ishimoto

/* Nav item color - underline */
#topNav #nav li a {
    color: #ff0000;
}
/* Nav item hover color - underline */
#topNav #nav li a:hover {
    color: violet;
}
/* Nav item active color - underline */
#topNav #nav li.active-link a {
    color: green !important;
}

Momentum

/* Nav item color - underline */
#topNav ul li a {
    color: #ff0000;
}
/* Nav item hover color - underline */
#topNav ul li a:hover {
    color: violet;
}
/* Nav item active color - underline */
#topNav ul li.active-link a {
    color: green;
}

Montauk: Julia, Kent, Montauk, OM

Same as Momentum

Native

/* Nav item color - underline */
#navBlock ul li a {
    color: #ff0000 !important;
}
/* Nav item hover color - underline */
#navBlock ul li a:hover {
    color: violet !important;
}
/* Nav item active color - underline */
#navBlock ul li.active-link a {
    color: green !important;
}

Pacific:  Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

/* Nav item color - underline */
#mainNavigation div a {
    color: #ff0000 !important;
}
/* Nav item hover color - underline */
#mainNavigation div a:hover {
    color: violet !important;
}
/* Nav item active color - underline */
#mainNavigation div.active a {
    color: green !important;
}

Skye: Foundry, Indigo, Ready, Skye, Tudor

/* Nav item color - underline */
.nav-blocks-wrapper div a span {
    color: #ff0000;
}
/* Nav item hover color - underline */
.nav-blocks-wrapper div a:hover span {
    color: violet;
}
/* Nav item active color - underline */
#mainNavigation div.nav-link--active a {
    color: green !important;
}

Tremont: Camino, Carson, Henson, Tremont

/* Nav item color - underline */
#mainNavigation div a span {
    color: #ff0000;
}
/* Nav item hover color - underline */
#mainNavigation div a:hover span {
    color: violet;
}
/* Nav item active color - underline */
#mainNavigation div.active a span {
    color: green;
}

Wells

/* Nav item color - underline */
div#topNav ul li a {
    color: #ff0000 !important;
}
/* Nav item hover color - underline */
div#topNav ul li a:hover {
    color: violet !important;
}
/* Nav item active color - underline */
div#topNav ul li.active-link a {
    color: green !important;
}

Wexley

/* Nav item color - underline */
#topNav ul li a {
    color: #ff0000;
}
/* Nav item hover color - underline */
#topNav ul li a:hover {
    color: violet;
}
/* Nav item active color - underline */
#topNav ul li.active-link a {
    color: green;
}

York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York

/* Nav item color - underline */
.site-navigation div a span {
    color: #ff0000;
}
/* Nav item hover color - underline */
.site-navigation div a:hover span {
    color: violet;
}
/* Nav item active color - underline */
.site-navigation div.active a span {
    color: green;
}

Squarespace 7.1

/* Nav item color - underline */
.header-nav-item a {
    color: #ff0000;
}
/* Nav item hover color - underline */
.header-nav-item a:hover {
    color: violet;
}
/* Nav item active color - underline */
.header-nav-item--active a {
    color: green;
}

If you have any questions, just comment below or send me a message