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

[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
Link to post
  • Answers 83
  • 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

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

Hi. Looks fine here?

Posted Images

Recommended Posts

  • 0
5 hours ago, ssommer101 said:

Hiya! 

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

Can you share site url?

Link to post
  • 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

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

 

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

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>

 

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

Link to post
  • 0
On 1/26/2021 at 9:48 AM, Supremo said:

@tuanphan https://supremo-essential.squarespace.com

Hi, how do I have white navigation link, but when hover header becomes white back ground with black title text. (sitewide) white background with black navigation link, only becomes white navigation link when I have background photos wrapped around it. Thanks in advance Mr.Pha

Screen Shot 2021-01-27 at 12.47.13 AM.png

Screen Shot 2021-01-27 at 12.47.34 AM.png

Hi. Do you still need this?

Link to post
  • 0

Hi tuanphan, can you help me with my question?

Site URL: https://rabbit-bobcat-zbp2.squarespace.com

Password: edes
It's on squarespace 7.1

I would like the white menu text on top of all pages to turn into black as soon as you start scrolling down. Then I would like the menu background bar to be white. (For now it's black because otherwise you can't read the menu)

Link to post
  • 0
On 2/2/2021 at 6:11 PM, els said:

Hi tuanphan, can you help me with my question?

 

Site URL: https://rabbit-bobcat-zbp2.squarespace.com

Password: edes
It's on squarespace 7.1

I would like the white menu text on top of all pages to turn into black as soon as you start scrolling down. Then I would like the menu background bar to be white. (For now it's black because otherwise you can't read the menu)

Add to Design > Custom CSS

/* Shrink header */
.shrink {
    background: white !important;
}
.shrink *:not(a.btn) {
    color: black !important;
}
.shrink .header-nav-folder-item a {
    color: white !important;
}

 

Link to post
  • 0

Hi tuanphan, 

Can I ask you again for help? Your code for the header menu from above works fine for all pages except one section: the blog pages and each blog post. Is it possible to make those menu's readable as well when one's scrolling? 

Website: cptnederland.nl (7.1)

Link to post
  • 0
On 2/27/2021 at 4:01 AM, els said:

Hi tuanphan, 

Can I ask you again for help? Your code for the header menu from above works fine for all pages except one section: the blog pages and each blog post. Is it possible to make those menu's readable as well when one's scrolling? 

Website: cptnederland.nl (7.1)

Hi. You mean change dropdown items color on blog page?

Link to post
  • 0

Yes. On every single blogpost. If you scroll down and then hover over the menu you cannot read the submenu now, because it's white on white.

On the rest of the site I used the black minimal theme in the header. Here I cannot do that, for it will make the entire background of the blogposts black. 

I would prefer it if the submenu "box" turns black with white text if you scroll down. Like the rest of the site. 

Would that be possible? 

Edited by els
forgot a few words
Link to post
  • 0
On 3/4/2021 at 12:39 AM, els said:

Yes. On every single blogpost. If you scroll down and then hover over the menu you cannot read the submenu now, because it's white on white.

On the rest of the site I used the black minimal theme in the header. Here I cannot do that, for it will make the entire background of the blogposts black. 

I would prefer it if the submenu "box" turns black with white text if you scroll down. Like the rest of the site. 

Would that be possible? 

Hi. Looks fine here?

image.thumb.png.e35906b5f2b56d2d9475546970ea0f01.png

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