The code is based on demo at squarespace.com/templates, so they may not work for some websites or navigation with dropdown
If the code doesn't work, try adding !important to after, eg: color: #f1f2f3 !important;
If you have any questions/found issues, just comment below or send me a private message. Thanks.
Avenue Template
/* Nav item color */
.main-nav ul li a {
color: #ff0000 !important;
}
/* Nav item hover color */
.main-nav ul li a:hover {
color: violet !important;
}
/* Nav item active color */
.main-nav ul li.active-link a {
color: green !important;
}
Aviator
/* Nav item color */
nav#main-navigation ul li a {
color: #ff0000 !important;
}
/* Nav item hover color */
nav#main-navigation ul li a:hover {
color: violet !important;
}
/* Nav item active color */
nav#main-navigation ul li.active-link a {
color: green !important;
}
/* Nav item color */
#mainNavigation div a {
color: #ff0000 !important;
}
/* Nav item hover color */
#mainNavigation div a:hover {
color: violet !important;
}
/* Nav item active color */
#mainNavigation div.active a {
color: green !important;
}
/* Nav item color */
.Header-nav-item {
color: #ff0000 !important;
}
/* Nav item hover color */
.Header-nav-item:hover {
color: violet !important;
}
/* Nav item active color */
.Header-nav-item--active {
color: green !important;
}
Farro: Farro, Haute
Same as Brine
Five
/* Nav item color */
nav#main-navigation ul li a {
color: #ff0000 !important;
}
/* Nav item hover color */
nav#main-navigation ul li a:hover {
color: violet !important;
}
/* Nav item active color */
nav#main-navigation ul li.active-link a {
color: green !important;
}
Flatiron
/* Nav item color */
ul#nav li a {
color: #ff0000 !important;
}
/* Nav item hover color */
ul#nav li a:hover {
color: violet !important;
}
/* Nav item active color */
ul#nav li.active-link a {
color: green !important;
}
Forte
/* Nav item color */
#topNav ul li a span {
color: #ff0000;
}
/* Nav item hover color */
#topNav ul li a:hover span {
color: violet;
}
/* Nav item active color */
#topNav ul li.active-link a span {
color: green !important;
}
Ishimoto
/* Nav item color */
#topNav #nav li a {
color: #ff0000;
}
/* Nav item hover color */
#topNav #nav li a:hover {
color: violet;
}
/* Nav item active color */
#topNav #nav li.active-link a {
color: green !important;
}
Momentum
/* Nav item color */
#topNav ul li a {
color: #ff0000;
}
/* Nav item hover color */
#topNav ul li a:hover {
color: violet;
}
/* Nav item active color */
#topNav ul li.active-link a {
color: green;
}
Montauk: Julia, Kent, Montauk, OM
Same as Momentum
Native
/* Nav item color */
#navBlock ul li a {
color: #ff0000 !important;
}
/* Nav item hover color */
#navBlock ul li a:hover {
color: violet !important;
}
/* Nav item active color */
#navBlock ul li.active-link a {
color: green !important;
}
/* Nav item color */
#mainNavigation div a {
color: #ff0000 !important;
}
/* Nav item hover color */
#mainNavigation div a:hover {
color: violet !important;
}
/* Nav item active color */
#mainNavigation div.active a {
color: green !important;
}
Skye: Foundry, Indigo, Ready, Skye, Tudor
/* Nav item color */
.nav-blocks-wrapper div a span {
color: #ff0000;
}
/* Nav item hover color */
.nav-blocks-wrapper div a:hover span {
color: violet;
}
/* Nav item active color */
#mainNavigation div.nav-link--active a {
color: green !important;
}
Tremont: Camino, Carson, Henson, Tremont
/* Nav item color */
#mainNavigation div a span {
color: #ff0000;
}
/* Nav item hover color */
#mainNavigation div a:hover span {
color: violet;
}
/* Nav item active color */
#mainNavigation div.active a span {
color: green;
}
Wells
/* Nav item color */
div#topNav ul li a {
color: #ff0000 !important;
}
/* Nav item hover color */
div#topNav ul li a:hover {
color: violet !important;
}
/* Nav item active color */
div#topNav ul li.active-link a {
color: green !important;
}
Wexley
/* Nav item color */
#topNav ul li a {
color: #ff0000;
}
/* Nav item hover color */
#topNav ul li a:hover {
color: violet;
}
/* Nav item active color */
#topNav ul li.active-link a {
color: green;
}
York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York
/* Nav item color */
.site-navigation div a span {
color: #ff0000;
}
/* Nav item hover color */
.site-navigation div a:hover span {
color: violet;
}
/* Nav item active colo */
.site-navigation div.active a span {
color: green;
}
Squarespace 7.1
/* Nav item color */
.header-nav-item a {
color: #ff0000 !important;
}
/* Nav item hover color */
.header-nav-item>a:hover {
color: red !important;
}
.header-nav-folder-item:hover a {
color: red !important;
}
/* Nav item active color */
.header-nav-item--active a {
color: green !important;
}
(Updated: SS 7.1)
Some custom code (CSS) to change color
Navigation Link
Navigation Hover Link
Navigation Active Link
>> 92 Templates Navigation Custom Font
No
Worked!
For Merida Template
.header-nav-item a {
color: !important;
}
/* Nav item hover color */
.header-nav-item a:hover {
color: #ff4c00 !important;
}
/* Nav item a
Question
tuanphan 9,586
(Updated: SS 7.1)
Some custom code (CSS) to change color
>> 92 Templates Navigation Custom Font
Notes
Avenue Template
/* Nav item color */ .main-nav ul li a { color: #ff0000 !important; } /* Nav item hover color */ .main-nav ul li a:hover { color: violet !important; } /* Nav item active color */ .main-nav ul li.active-link a { color: green !important; }
Aviator
/* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; }
Bedford Family: Anya, Bedford, Bryant, Hayden, Bedford
/* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; }
Brine Family: 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 */ .Header-nav-item { color: #ff0000 !important; } /* Nav item hover color */ .Header-nav-item:hover { color: violet !important; } /* Nav item active color */ .Header-nav-item--active { color: green !important; }
Farro: Farro, Haute
Same as Brine
Five
/* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; }
Flatiron
/* Nav item color */ ul#nav li a { color: #ff0000 !important; } /* Nav item hover color */ ul#nav li a:hover { color: violet !important; } /* Nav item active color */ ul#nav li.active-link a { color: green !important; }
Forte
/* Nav item color */ #topNav ul li a span { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover span { color: violet; } /* Nav item active color */ #topNav ul li.active-link a span { color: green !important; }
Ishimoto
/* Nav item color */ #topNav #nav li a { color: #ff0000; } /* Nav item hover color */ #topNav #nav li a:hover { color: violet; } /* Nav item active color */ #topNav #nav li.active-link a { color: green !important; }
Momentum
/* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; }
Montauk: Julia, Kent, Montauk, OM
Same as Momentum
Native
/* Nav item color */ #navBlock ul li a { color: #ff0000 !important; } /* Nav item hover color */ #navBlock ul li a:hover { color: violet !important; } /* Nav item active color */ #navBlock ul li.active-link a { color: green !important; }
Pacific: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific
/* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; }
Skye: Foundry, Indigo, Ready, Skye, Tudor
/* Nav item color */ .nav-blocks-wrapper div a span { color: #ff0000; } /* Nav item hover color */ .nav-blocks-wrapper div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.nav-link--active a { color: green !important; }
Tremont: Camino, Carson, Henson, Tremont
/* Nav item color */ #mainNavigation div a span { color: #ff0000; } /* Nav item hover color */ #mainNavigation div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.active a span { color: green; }
Wells
/* Nav item color */ div#topNav ul li a { color: #ff0000 !important; } /* Nav item hover color */ div#topNav ul li a:hover { color: violet !important; } /* Nav item active color */ div#topNav ul li.active-link a { color: green !important; }
Wexley
/* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; }
York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York
/* Nav item color */ .site-navigation div a span { color: #ff0000; } /* Nav item hover color */ .site-navigation div a:hover span { color: violet; } /* Nav item active colo */ .site-navigation div.active a span { color: green; }
Squarespace 7.1
/* Nav item color */ .header-nav-item a { color: #ff0000 !important; } /* Nav item hover color */ .header-nav-item>a:hover { color: red !important; } .header-nav-folder-item:hover a { color: red !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; }
Created by Tuan Phan.
Share to be shared more.
Edited by tuanphanupdate code for SS 7.1
Email me if you have need any help (free, of course :-D). Answer within 24 hours.
How to:
-- Yup!
Link to post
Top Posters For This Question
34
7
5
4
Popular Days
Jan 16
7
Feb 20
6
Apr 13
6
Aug 7
4
Top Posters For This Question
tuanphan 34 posts
els 7 posts
EdStemp 5 posts
PJ22 4 posts
Popular Days
Jan 16 2020
7 posts
Feb 20 2020
6 posts
Apr 13 2020
6 posts
Aug 7 2020
4 posts
Popular Posts
tuanphan
(Updated: SS 7.1) Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link >> 92 Templates Navigation Custom Font No
ThitiratMy
Worked! For Merida Template .header-nav-item a { color: !important; } /* Nav item hover color */ .header-nav-item a:hover { color: #ff4c00 !important; } /* Nav item a
tuanphan
Hi. Looks fine here?
Posted Images
83 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment