[Share] Custom Code - Navigation Link Color/Hover Color/Active Color

tuanphan · November 1, 2019

(Updated: SS 7.1)

Some custom code (CSS) to change color

Navigation Link
Navigation Hover Link
Navigation Active Link

>> 92 Templates Navigation Custom Font

Notes

Add code to Home > Design > Custom CSS
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;
}

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 July 16, 2020 by tuanphan
update code for SS 7.1

vijayamarshi · February 25, 2020

Hi there, on my site: healthfulev.com, I added a box around one of my menu items in the secondary navigation. Since then the active color no longer shows for my secondary navigation. I added the code from above and its still not working. Can you please let me know what's wrong with my code?

/* navigation style */
.Header-nav.Header-nav--secondary a.Header-nav-item:nth-child(3) {
background-color: white;
padding: 10px 20px;
border-radius: 0px;
border: 1px solid black;
color: black;
}

.Header-nav.Header-nav--secondary a.Header-nav-item:nth-child(3) {
background-color: white;
color: #black!important;
}

.Header-nav-item--active {
color: #F634FA !important;
}

.Header-nav.Header-nav--primary a.Header-nav-item:hover {
color: #F634FA!important;
}

.Header-nav.Header-nav--secondary a.Header-nav-item:hover {
color: #F634FA!important;
}
/* navigation style */

rmanke · March 30, 2020

Isn't the recommended way to change the navigation links in 7.1 to edit the theme colours?

Go to Design -> Colors then click on the pencil icon next to your active selected colour palette, and then select navigation links colour.

Or, are people doing the code changes so they can change the hover colours? The samples I tried here for 7.1 aren't working on 7.1.

derricksrandomviews · March 30, 2020

Sure, my nav bar turns red when hovering over it. I used this code, color is reddish pink.

/* Change here the hovering background color! */
@hover-background-color: #F1948A;;

kaatmaca · April 7, 2020

Hey @tuanphan

This is great, but I have one question. I have a folder in my navigation bar with multiple pages that expand below it. With the code you provided - all items in the folder are highlighted as the active link. Possible to adjust it so that it's only the actual active page?

www.ali.nyc/home

tuanphan · April 8, 2020

14 hours ago, kaatmaca said:

Hey @tuanphan

This is great, but I have one question. I have a folder in my navigation bar with multiple pages that expand below it. With the code you provided - all items in the folder are highlighted as the active link. Possible to adjust it so that it's only the actual active page?

www.ali.nyc/home

Hi. Which code did you use?

TwoSpectacles · April 13, 2020

@tuanphan Seriously super helpful! Thank you! Is there a code so we can have some type of hover highlight on Mobile? If not then maybe an underline? 🧐

tuanphan · April 13, 2020

21 minutes ago, TwoSpectacles said:

@tuanphan Seriously super helpful! Thank you! Is there a code so we can have some type of hover highlight on Mobile? If not then maybe an underline? 🧐

Can you share link to your site?

TwoSpectacles · April 13, 2020

@tuanphan It's still being built.
conch-pufferfish-x8d5.squarespace.com
Pass:1234

tuanphan · April 13, 2020

6 minutes ago, TwoSpectacles said:

@tuanphan It's still being built.
conch-pufferfish-x8d5.squarespace.com
Pass:1234

underline link on hover (mobile)?

.header-menu-nav-item:hover a {
    text-decoration: underline;
}

Not sure it will work on mobile ☺️

TwoSpectacles · April 13, 2020

@tuanphan it worked! THANK YOU!

ThitiratMy · April 13, 2020

Worked!

For Merida Template

.header-nav-item a {
color: !important;
}
/* Nav item hover color */
.header-nav-item a:hover {
color: #ff4c00 !important;
}
/* Nav item active color */
.header-nav-item--active a {
color: green !important;
}

amuz · April 15, 2020

Can you help me? Just trying to change the second link in my navigation to red (Shot Patients) and I can't seem to get the code to work that you listed for the Five template. Thank you!

www.allergyme.com

PJ22 · May 12, 2020

How would i add a button to the secondary nav on hover to match the primary one? and how would i center the text and the box under shop

ByPaigeJordan.com

Thanks

Edited May 12, 2020 by PJ22

tuanphan · May 13, 2020

11 hours ago, PJ22 said:

How would i add a button to the secondary nav on hover to match the primary one? and how would i center the text and the box under shop

ByPaigeJordan.com

Thanks

I see 2 buttons here. Did you solve?

PJ22 · May 13, 2020

Thanks for the quick reply. Not yet. We want the secondary buttons to be the same as shop and about, As you hover over the buttons we would like for the box to be highlighted black and the text to turn white

tuanphan · May 14, 2020

On 4/16/2020 at 1:46 AM, amuz said:

Can you help me? Just trying to change the second link in my navigation to red (Shot Patients) and I can't seem to get the code to work that you listed for the Five template. Thank you!

www.allergyme.com

sorry, missing your comment.

You mean active link, hover link or?

14 hours ago, PJ22 said:

Thanks for the quick reply. Not yet. We want the secondary buttons to be the same as shop and about, As you hover over the buttons we would like for the box to be highlighted black and the text to turn white

Add to Home > Design > Custom CSS

a.Header-nav-folder-item:hover {
    background: black;
    color: white !important;
}
span.Header-nav-folder {
    padding: 0;
}
span.Header-nav-folder a {
    padding: 15px 5px;
}

PJ22 · May 14, 2020

3 hours ago, tuanphan said:
sorry, missing your comment.

You mean active link, hover link or?

Add to Home > Design > Custom CSS
a.Header-nav-folder-item:hover {
    background: black;
    color: white !important;
}
span.Header-nav-folder {
    padding: 0;
}
span.Header-nav-folder a {
    padding: 15px 5px;
}

That worked perfectly Thanks for all of your help. One last thing if possible, can we center the box and text to aligned under shop? The box comes out towards the right side, maybe if it could come out evenly on the left side to match the right side with the text centered, i attached a similar example below

Edited May 14, 2020 by PJ22

tuanphan · May 15, 2020

9 hours ago, PJ22 said:

That worked perfectly Thanks for all of your help. One last thing if possible, can we center the box and text to aligned under shop? The box comes out towards the right side, maybe if it could come out evenly on the left side to match the right side with the text centered, i attached a similar example below

span.Header-nav-folder {
    left: -10px !important;
}

PJ22 · May 15, 2020

13 hours ago, tuanphan said:
span.Header-nav-folder {
    left: -10px !important;
}

Big Thank you.

Umlaut · July 13, 2020

On 11/1/2019 at 2:41 AM, tuanphan said:

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

Hi! I used this code on a 7.1 site, and it changes all the menu items, including the dropdown. Can you provide code that doesn't affect the dropdown menu items, only the main navigation item? Thanks!

tuanphan · July 15, 2020

On 7/14/2020 at 1:31 AM, Umlaut said:

Hi! I used this code on a 7.1 site, and it changes all the menu items, including the dropdown. Can you provide code that doesn't affect the dropdown menu items, only the main navigation item? Thanks!

Can you share link to your site? I can check easier.

Umlaut · July 15, 2020

11 hours ago, tuanphan said:

Can you share link to your site? I can check easier.

I don't have the menu live until I can get this code fixed. But I have taken a screenshot of how it's working w/the code. All copy is red to pink on hover, and I'm actually curious how to either:

1. Turn just top level nav words like "egg donors" to a different color font OR

2. Add a color background to the top level nav words when that menu item is selected/hovered over. (preferred)

Open to options, just don't know how to do it! Tried inspecting and changing different elements, but can't seem to identify the right ones unfortunately

Edited July 15, 2020 by Umlaut
update

tuanphan · July 16, 2020

Fixed: Squarespace 7.1. Nav Hover Link Color

Umlaut · July 24, 2020

Hi there! Is there anyone who can help me with this? I really would like to know how to change the nav word apart from the dropdown menu items.

ssommer101 · August 7, 2020

Hiya!

I am looking to adjust the secondary nav for Burke, any suggestions?

[Share] Custom Code - Navigation Link Color/Hover Color/Active Color

Question

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

Posted Images

76 answers to this question

Recommended Posts

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources