Jump to content

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

Recommended Posts

Posted (edited)

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
Posted

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. 

Posted
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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 

Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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!

Posted
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

Posted

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!

Posted
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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! 

Posted
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...

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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...

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 3 weeks later...
Posted (edited)
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?

image.png.329792ca0259667dbc8b50321ab760c8.png

Kind regards,
Adrian

Edited by Adrian06
Posted
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?

image.png.329792ca0259667dbc8b50321ab760c8.png

Kind regards,
Adrian

Can you share link to your site?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.