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 86
  • 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? I can check easier.

Add to Design > Custom CSS /* Footer nav active */ footer#footer .collection.active a { color: green; }  

Posted Images

Recommended Posts

  • 0
16 hours ago, tuanphan said:

Hi. Looks fine here?

image.thumb.png.e35906b5f2b56d2d9475546970ea0f01.png

 

I've been hobbying with the code you gave me before.

/* Shrink header */
.shrink {
    background: white !important;
}
.shrink *:not(a.btn) {
    color: black !important;
}
.shrink .header-nav-folder-item a {
    color: white !important;
}
 
I changed the last white into grey, that gave me the result of your screenshot. I'd prefer to have it black and white though. This is a workaround. 
Link to post
  • 0
10 hours ago, els said:

 

 

I've been hobbying with the code you gave me before.


/* Shrink header */
.shrink {
    background: white !important;
}
.shrink *:not(a.btn) {
    color: black !important;
}
.shrink .header-nav-folder-item a {
    color: white !important;
}
 
I changed the last white into grey, that gave me the result of your screenshot. I'd prefer to have it black and white though. This is a workaround. 
  •  

So do you still need help on this?

Link to post
  • 0
On 3/8/2021 at 9:40 AM, tuanphan said:

So do you still need help on this?

Yes please, thank you. I set it back to your original code. I would like the menu overlay to be black also in the seperate blog posts. So: white on top, like it is now and when you scroll down that the menu that shows when you hoover over it turns black. With white text on it. Just like on all the other pages. 

 

This is the code you gave me, which I applied: 

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

 

If this is too hard to achieve (because the standard menu text in blogposts is black, contrary to the white text on the other pages, maybe it is possible to add an image on top of each blogpost, in the header I mean. I can't see how that could be done either. 

Edited by els
Link to post
  • 0
On 3/30/2021 at 8:53 AM, thehouseofredvelvet said:

This is amazing. But, how do you do this for the Footer navigation? Would you just change it to Footernavigation in the title?

Thank you.

thehouseofredvelvet.com

Add to Design > Custom CSS

/* Footer nav active */
footer#footer .collection.active a {
    color: green;
}

 

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

Add to Design > Custom CSS


/* Footer nav active */
footer#footer .collection.active a {
    color: green;
}

 

Would you know how to fix the two buttons in my Pre-Footer for the Memoirs pages only? They work on all other pages, but for the blog post pages, they are hovering with a white and keeping a white text. All other pages, they highlight white, but go to a black text. I am open to changing the style of the button, but do you know how to change this? Thank you!!

https://www.thehouseofredvelvet.com/memoirs/welcome

Link to post
  • 0
On 3/31/2021 at 10:52 PM, thehouseofredvelvet said:

Would you know how to fix the two buttons in my Pre-Footer for the Memoirs pages only? They work on all other pages, but for the blog post pages, they are hovering with a white and keeping a white text. All other pages, they highlight white, but go to a black text. I am open to changing the style of the button, but do you know how to change this? Thank you!!

https://www.thehouseofredvelvet.com/memoirs/welcome

Hi. You mean remove donate button underline? Add this to Design > Custom CSS

div#preFooter .button-block a {
    text-decoration: none !important;
}

 

Link to post
  • 0

Hey Tuanphan, I've read through this thread and already used some helpful links. I added the CSS for a custom color when hovering over the navigation menu. And I added the CSS to remove the line underneath the chosen link.

 

Can you help me with also adding a color when hovering over the shop categories on the left, regardless of which category I am in atm?

 

Here is the link when in Earrings section:

https://www.soulmaidjewelry.com/shop/earrings

 

Would there have to be a CSS added for each category or is there a general code?

My "shop" link in the navigation menu brings you to a page with photos which I added as I wanted the landing page to be categories rather than all items showing randomly on one page. 

 

 

Link to post
  • 0
On 5/3/2021 at 6:27 AM, Juelz said:

Hey Tuanphan, I've read through this thread and already used some helpful links. I added the CSS for a custom color when hovering over the navigation menu. And I added the CSS to remove the line underneath the chosen link.

 

Can you help me with also adding a color when hovering over the shop categories on the left, regardless of which category I am in atm?

 

Here is the link when in Earrings section:

https://www.soulmaidjewelry.com/shop/earrings

 

Would there have to be a CSS added for each category or is there a general code?

My "shop" link in the navigation menu brings you to a page with photos which I added as I wanted the landing page to be categories rather than all items showing randomly on one page. 

 

 

Add to Design > Custom CSS

/* Shop category color on hover */
li.category-item a:hover {
    color: red;
}

 

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