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

  • 1
2 minutes ago, Adrian06 said:

I want to remove the underline. It's black initially and then turns green once you hover it.

.header-nav-item--active a {
    background: none !important;
}

 


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
  • 1
11 hours ago, PJ22 said:

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

I see 2 buttons here. Did you solve?


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
  • 1
On 4/16/2020 at 1:46 AM, amuz said:

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 

sorry, missing your comment.

You mean active link, hover link or?

14 hours ago, PJ22 said:

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

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

 


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
  • 1
9 hours ago, PJ22 said:

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

 

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

 


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

Updated code for Squarespace 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
  • 0

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. 

Share this post


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


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

Share this post


Link to post
  • 0
5 minutes ago, EdStemp said:

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 

a:hover {color: red;}


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 Tuanphan, could I possibly ask you another question - is there away to remove the banner overlay colour just on one specific page?

Share this post


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


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

Share this post


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

Share this post


Link to post
  • 0
On 1/16/2020 at 9:20 PM, EdStemp said:

Do you know what the CSS would be for that? thank you!

Need site url to check.


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

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!

Share this post


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


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

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! 

Share this post


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


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


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

Share this post


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

 


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

Create an account or sign in to comment

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


×
×
  • Create New...