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

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

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Recommended Posts

  • 0
5 minutes ago, Adrian06 said:

I see green underline here?

I checked code, and it is also green underline


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


Link to post
  • 0

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 by AdamSupra

Share this post


Link to post
  • 0

Hi there, on my site: healthfulev.com, I added a box around one of my menu items in the secondary navigation. Since then the active color no longer shows for my secondary navigation. I added the code from above and its still not working. Can you please let me know what's wrong with my code?

 

/* navigation style */
.Header-nav.Header-nav--secondary a.Header-nav-item:nth-child(3) {
  background-color: white;
  padding: 10px 20px;
  border-radius: 0px;
  border: 1px solid black;
  color: black;
}

.Header-nav.Header-nav--secondary a.Header-nav-item:nth-child(3) {
  background-color: white;
  color: #black!important;
}

.Header-nav-item--active {
    color: #F634FA !important;
}

.Header-nav.Header-nav--primary a.Header-nav-item:hover {
  color: #F634FA!important;
}

.Header-nav.Header-nav--secondary a.Header-nav-item:hover {
  color: #F634FA!important;
}
/* navigation style */

Share this post


Link to post
  • 0

Isn't the recommended way to change the navigation links in 7.1 to edit the theme colours?

Go to Design -> Colors then click on the pencil icon next to your active selected colour palette, and then select navigation links colour.

Or, are people doing the code changes so they can change the hover colours?  The samples I tried here for 7.1 aren't working on 7.1.

Navigation links.jpg

Share this post


Link to post
  • 0

Hey @tuanphan

 

This is great, but I have one question. I have a folder in my navigation bar with multiple pages that expand below it. With the code you provided - all items in the folder are highlighted as the active link. Possible to adjust it so that it's only the actual active page? 

www.ali.nyc/home

Share this post


Link to post
  • 0
14 hours ago, kaatmaca said:

Hey @tuanphan

 

This is great, but I have one question. I have a folder in my navigation bar with multiple pages that expand below it. With the code you provided - all items in the folder are highlighted as the active link. Possible to adjust it so that it's only the actual active page? 

www.ali.nyc/home

Hi. Which code did you use?


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
21 minutes ago, TwoSpectacles said:

@tuanphan Seriously super helpful! Thank you! Is there a code so we can have some type of hover highlight on Mobile? If not then maybe an underline? 🧐

Can you share link to your site?


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
6 minutes ago, TwoSpectacles said:

@tuanphan It's still being built.
conch-pufferfish-x8d5.squarespace.com
Pass:1234

 

underline link on hover (mobile)? 

.header-menu-nav-item:hover a {
    text-decoration: underline;
}

Not sure it will work on mobile ☺️


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Worked! 

For Merida Template

.header-nav-item a {
    color:  !important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #ff4c00 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: green !important;
}

Share this post


Link to post
  • 0

Can you help me? Just trying to change the second link in my navigation to red (Shot Patients) and I can't seem to get the code to work that you listed for the Five template. Thank you!

www.allergyme.com 

Share this post


Link to post
  • 0
Posted (edited)

How would i add a button to the secondary nav on hover to match the primary one? and how would i center the text and the box under shop

ByPaigeJordan.com

Thanks

Edited by PJ22

Share this post


Link to post
  • 0

Thanks for the quick reply. Not yet. We want the secondary buttons to be the same as shop and about, As you hover over the buttons we would like for the box to be highlighted black and the text to turn white

screenshot.JPG

Share this post


Link to post
  • 0
Posted (edited)
3 hours ago, tuanphan said:

sorry, missing your comment.

You mean active link, hover link or?

Add to Home > Design > Custom CSS


a.Header-nav-folder-item:hover {
    background: black;
    color: white !important;
}
span.Header-nav-folder {
    padding: 0;
}
span.Header-nav-folder a {
    padding: 15px 5px;
}

 

That worked perfectly Thanks for all of your help. One last thing if possible, can we center the box and text to aligned under shop? The box comes out towards the right side, maybe if it could come out evenly on the left side to match the right side with the text centered,  i attached a similar example below

tempsnip.jpg

Edited by PJ22

Share this post


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

span.Header-nav-folder {
    left: -10px !important;
}

 

Big Thank you.

Share this post


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

/* Nav item color */ .header-nav-item a { color: #ff0000 !important; } /* Nav item hover color */ .header-nav-item a:hover { color: violet !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; }

Hi! I used this code on a 7.1 site, and it changes all the menu items, including the dropdown. Can  you provide code that doesn't affect the dropdown menu items, only the main navigation item? Thanks!

Share this post


Link to post
  • 0
On 7/14/2020 at 1:31 AM, Umlaut said:

Hi! I used this code on a 7.1 site, and it changes all the menu items, including the dropdown. Can  you provide code that doesn't affect the dropdown menu items, only the main navigation item? Thanks!

Can you share link to your site? I can check easier.


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)
11 hours ago, tuanphan said:

Can you share link to your site? I can check easier.

I don't have the menu live until I can get this code fixed. But I have taken a screenshot of how it's working w/the code. All copy is red to pink on hover, and I'm actually curious how to either:

1. Turn just  top level nav words like "egg donors" to a different color font OR

2. Add a color background to the top level nav words when that menu item is selected/hovered over. (preferred)

Open to options, just don't know how to do it! Tried inspecting and changing different elements, but can't seem to identify the right ones unfortunately


image.png.f9d5cac52a3d52e72fad68a4f4891cc4.png
 

Edited by Umlaut
update

Share this post


Link to post
  • 0

Fixed: Squarespace 7.1. Nav Hover Link Color


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Hi there! Is there anyone who can help me with this? I really would like to know how to change the nav word apart from the dropdown menu items. 

Share this post


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