Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 6

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


tuanphan

Question

(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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • Answers 64
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

(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

Can you share link to your site?

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; }

Posted Images

Recommended Posts

  • 0

Hi @tuanphan--

 

I am having the same problem as some of the others.. my navigation menu items (sub-sections) are also highlighted and I only want the page I am on to be highlighted. How can I fix this? Thanks. 

 

So far I have this pasted into my CUSTOM CSS:
 

Quote

/* Nav item color */
.header-nav-item a {
    color: black !important; 
}
/* Nav item hover color */
.header-nav-item>a:hover {
    color: black !important;
}
.header-nav-folder-item:hover a {
    color: #F92F00 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #F92F00 !important;
}

 

Thank you so much for all your help! You are a god send. 

 

Best,

Grace

Screen Shot 2020-09-14 at 9.58.51 AM.png

Link to post
  • 0
4 hours ago, gracejung said:

Hi @tuanphan--

 

I am having the same problem as some of the others.. my navigation menu items (sub-sections) are also highlighted and I only want the page I am on to be highlighted. How can I fix this? Thanks. 

 

So far I have this pasted into my CUSTOM CSS:
 

 

Thank you so much for all your help! You are a god send. 

 

Best,

Grace

Can you share site url? I can check easier

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0
On 9/14/2020 at 5:53 PM, tuanphan said:

Can you share site url? I can check easier

@tuanphan

 

kumquat-sealion-xmy5.squarespace.com

 

It's created on the PAZARI template on Squarespace 7.1. Thank you!

Edited by gracejung
Link to post
  • 0
On 9/16/2020 at 2:44 AM, gracejung said:

@tuanphan

 

kumquat-sealion-xmy5.squarespace.com

 

It's created on the PAZARI template on Squarespace 7.1. Thank you!

Edit this code

.header-nav-item--active a {
    color: #f92f00 !important;
}

to this

.header-nav-item--active>a, .header-nav-folder-item--active a {
    color: #f92f00 !important;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0

Looking for guidance on this. I have used the following code to eliminate the underlines in my navigation and instead differentiate between active/inactive pages by color:
 

/* Remove underlines from nav items */
.header-nav-item--active a {
   background-image: none !important;
}
/* Nav item color, not active */
.header-nav-item a {
    color: #a3a3a3 !important;
}
/* Nav item color, on hover*/
.header-nav-item>a:hover {
    color: white !important;
}
.header-nav-folder-item:hover a {
    color: white !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: white !important;
}

This succeeds in achieving the desired effect, but it has an unintended consequence whereby any time I edit pages, I lose the cover images in the portfolio homepage. Anyone know based on this code why that side effect is happening?

Link to post
  • 0
On 12/4/2020 at 9:49 AM, OD_forum said:

Looking for guidance on this. I have used the following code to eliminate the underlines in my navigation and instead differentiate between active/inactive pages by color:
 


/* Remove underlines from nav items */
.header-nav-item--active a {
   background-image: none !important;
}
/* Nav item color, not active */
.header-nav-item a {
    color: #a3a3a3 !important;
}
/* Nav item color, on hover*/
.header-nav-item>a:hover {
    color: white !important;
}
.header-nav-folder-item:hover a {
    color: white !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: white !important;
}

This succeeds in achieving the desired effect, but it has an unintended consequence whereby any time I edit pages, I lose the cover images in the portfolio homepage. Anyone know based on this code why that side effect is happening?

Can you share site url? We can check easier

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0
6 hours ago, tuanphan said:

Can you share site url? We can check easier

Sure, you can find the site at this link. On further inspection it may not in fact be related to the CSS as I'm getting the same error when I remove it (albeit slightly less frequently, strange), but feel free to take a look.

Link to post
  • 0
On 12/6/2020 at 5:11 PM, OD_forum said:

Sure, you can find the site at this link. On further inspection it may not in fact be related to the CSS as I'm getting the same error when I remove it (albeit slightly less frequently, strange), but feel free to take a look.

You can remove above code & add this code to Home > Settings > Advanced > Code Injection > Header

<style>
  /* Remove underlines from nav items */
.header-nav-item--active a {
   background-image: none !important;
}
/* Nav item color, not active */
.header-nav-item a {
    color: #a3a3a3 !important;
}
/* Nav item color, on hover*/
.header-nav-item>a:hover {
    color: white !important;
}
.header-nav-folder-item:hover a {
    color: white !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: white !important;
}
</style>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0
On 11/1/2019 at 3:41 AM, tuanphan said:

(Updated: SS 7.1)

Some custom code (CSS) to change color

  • Navigation Link
  • Navigation Hover Link
  • Navigation Active Link

Do you have code to fix the Body Link Color? I'm using Wells 7.0. The Body Link Color is super light grey. I need it to be black but every time I use the Site Wide - Body Link Color menu button, pick a new color, it refuses to do so.  It also doesn't allow me to change the background color, which isn't of concern to me but it's also super light grey/white so the links in the body of my text are pretty much impossible to see. 

Edited by malloryruff
Link to post
  • 0
On 1/9/2021 at 4:36 AM, malloryruff said:

Do you have code to fix the Body Link Color? I'm using Wells 7.0. The Body Link Color is super light grey. I need it to be black but every time I use the Site Wide - Body Link Color menu button, pick a new color, it refuses to do so.  It also doesn't allow me to change the background color, which isn't of concern to me but it's also super light grey/white so the links in the body of my text are pretty much impossible to see. 

Hi. Can you share link to a page? I can check code easier

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...