Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2
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: violet !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

Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post

25 answers to this question

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

 


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

Updated code for Squarespace 7.1


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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?


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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.


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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?


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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?

 


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


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

I see green underline here?

I checked code, and it is also green underline


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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

Create an account or sign in to comment

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


×
×
  • Create New...