[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 by tuanphan
update code for SS 7.1

tuanphan · December 9, 2019

Updated code for Squarespace 7.1

tom345647 · December 22, 2019

First, thanks tuanphan, your other posts have already helped me multiple times. But I am using Carson (says Tremont family) and this did not work for me. I tried searching the view-source: of my site for most of these options and I did not find one that works. To many links on to many different backgrounds, the more I could access link color and hover color for different places, like navigation, would help a lot.

tuanphan · December 22, 2019

5 hours ago, tom345647 said:

First, thanks tuanphan, your other posts have already helped me multiple times. But I am using Carson (says Tremont family) and this did not work for me. I tried searching the view-source: of my site for most of these options and I did not find one that works. To many links on to many different backgrounds, the more I could access link color and hover color for different places, like navigation, would help a lot.

Can you share link to your site?

tom345647 · December 26, 2019

The site is not live yet. I think I figured it out. Similar to Square 7.1

.nav-item a:hover {
text-decoration: underline !important;
color: hsl(120, 87%, 52%) !important;
}

EdStemp · January 16

Hi im using Brine but wanting to change the link hover colour to all text across the site and not just the nav bar. Can you help?

Thanks

tuanphan · January 16

5 minutes ago, EdStemp said:

Hi im using Brine but wanting to change the link hover colour to all text across the site and not just the nav bar. Can you help?

Thanks

a:hover {color: red;}

EdStemp · January 16

Thanks Tuanphan! Is there an additional code to remove the hover colour from the footer?

EdStemp · January 16

Hi Tuanphan, could I possibly ask you another question - is there away to remove the banner overlay colour just on one specific page?

tuanphan · January 16

1 hour ago, EdStemp said:

Thanks Tuanphan! Is there an additional code to remove the hover colour from the footer?

depends template. each template has different code.

you can add css to Page Header to remove overlay on specific page

EdStemp · January 16

44 minutes ago, tuanphan said:

depends template. each template has different code.

you can add css to Page Header to remove overlay on specific page

Do you know what the CSS would be for that? thank you!

EdStemp · January 16

44 minutes ago, tuanphan said:

depends template. each template has different code.

you can add css to Page Header to remove overlay on specific page

Its the Ethan template from Brine

tuanphan · January 18

On 1/16/2020 at 9:20 PM, EdStemp said:

Do you know what the CSS would be for that? thank you!

Need site url to check.

thewendyhouseproject · January 21

Thank you so much tuanphan! This has been extremely helpful! Can you please help me with a little hiccup? I'm using Maple template which belongs to the Brine family. I added this code based on your knowledge to have a little outline on the active page:

.Header-nav-item--active {

outline-style: solid !important;
outline-width: 1px !important;
outline-offset: 3px !important;
}

It works like a charm, but only on pages in the header. Links and Folders seem to have a different coding since it isn't working. Would appreciate your help a lot!

tuanphan · January 22

3 hours ago, thewendyhouseproject said:

Thank you so much tuanphan! This has been extremely helpful! Can you please help me with a little hiccup? I'm using Maple template which belongs

It works like a charm, but only on pages in the header. Links and Folders seem to have a different coding since it isn't working. Would appreciate your help a lot!

Can you provide site url?

thewendyhouseproject · January 23

On 1/21/2020 at 6:50 PM, tuanphan said:

Can you provide site url?

Sure, it's thewendyhouseproject.com

thank you so much!

StageOz · January 28

Please let me know if you have a solution. I'm using the Carson Template and just want to turn off a page overlay on my info + contact page. stageoz.com thank you!

tuanphan · February 1

On 1/22/2020 at 3:56 AM, thewendyhouseproject said:

Thank you so much tuanphan! This has been extremely helpful! Can you please help me with a little hiccup? I'm using Maple template which belongs to the Brine family. I added this code based on your knowledge to have a little outline on the active page

It works like a charm, but only on pages in the header. Links and Folders seem to have a different coding since it isn't working. Would appreciate your help a lot!

I don't see folders on your site to check code...

tuanphan · February 1

On 1/22/2020 at 3:56 AM, thewendyhouseproject said:

Thank you so much tuanphan! This has been extremely helpful! Can you please help me with a little hiccup? I'm using Maple template which belongs to the Brine family. I added this code based on your knowledge to have a little outline on the active page

It works like a charm, but only on pages in the header. Links and Folders seem to have a different coding since it isn't working. Would appreciate your help a lot!

I don't see folders on your site to check code...

Adrian06 · February 20

On 12/9/2019 at 3:19 AM, tuanphan said:

Updated code for Squarespace 7.1

Hello and thank you for this. I'm designing in 7.1 and it worked nicely. However it doesn't quite look right with the active page underline. I have searched around the forum but I couldn't find how to remove it. Are you able to help with that?

Kind regards,
Adrian

Edited February 20 by Adrian06

tuanphan · February 20

3 minutes ago, Adrian06 said:

Hello and thank you for this. I'm designing in 7.1 and it worked nicely. However it doesn't quite look right with the active page underline. I have searched around the forum but I couldn't find how to remove it. Are you able to help with that?

Kind regards,
Adrian

Can you share link to your site?

Adrian06 · February 20

4 minutes ago, tuanphan said:

Can you share link to your site?

https://greenstonegroup.squarespace.com/

p: green

Edited February 20 by Adrian06

tuanphan · February 20

5 minutes ago, Adrian06 said:

https://greenstonegroup.squarespace.com/

p: green

I see green underline here?

I checked code, and it is also green underline

Adrian06 · February 20

1 minute ago, tuanphan said:

I see green underline here?

I checked code, and it is also green underline

I want to remove the underline. It's black initially and then turns green once you hover it.

tuanphan · February 20

2 minutes ago, Adrian06 said:

I want to remove the underline. It's black initially and then turns green once you hover it.

.header-nav-item--active a {
    background: none !important;
}

AdamSupra · February 21

So I have a site that's not yet active as well but I am trying to figure out how to make the navigation links when hovered over change color like a button does and be highlighted with a background color... for instance I also work with this company CarCultureTV.com to see how the nav works.

Would this coding plus something extra make that work or is even possible with squarespace?

UPDATE: I actually made it public to see... www.adamhyattphotography.com

Edited February 22 by AdamSupra

[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

58 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