Navigation hover in Squarespace 7.1

Hello! I'm looking to change the color of navigation links when I hover over them in Squarespace 7.1. There doesn't seem to be an option to do that yet. Does anyone know the CSS for this? Thanks!

/* Nav item hover color - underline */
.header-nav-item a:hover {
    color: violet;
}

Reference (nav hover color code for all templates 7.0 & 7.1): https://beaverhero.com/squarespace-navigation-links/

Hmm...having the same issue and the code still isn't doing the hover :/ Is there something else to try? Thanks so much!

7 minutes ago, Fishlette said:

Hmm...having the same issue and the code still isn't doing the hover :/ Is there something else to try? Thanks so much!

Can you share link to your site?

Yes! Please see link below:

https://www.embodypoledance.com/

On 12/18/2019 at 9:58 PM, Fishlette said:

Yes! Please see link below:

https://www.embodypoledance.com/

 

Add to Home > Design > Custom CSS

.header-nav-item a:hover {
    color: red !important;
}

Code totally works for me!

On 12/19/2019 at 5:07 AM, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-item a:hover {
    color: red !important;
}

 

Is there a way to create a hover underline effect for navigation links in the header menu?

We have a fun free one you can download here (see it in use in navigation on our site) it is a highlighter effect instead of just an underline. www.squreaddons.com 

On 12/19/2019 at 10:07 AM, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-item a:hover {
    color: red !important;
}

 

I have created a site in Squarespace -
http://www.noelwork.org/

but consider myself an intermediate user, in that I've only used the templates so far - haven't tried to inject any Custom CSS.
But I want to make my navigation have some effects, like the one referenced above. I was going to enter it on my site, but see the warning:

      Warning: Adding custom CSS to your site can break your design.
      Please use caution when using this feature.
      Our support team will be limited in their ability to help you with
      design related issues if you have custom CSS.

So I'm nervous - is there a way to enter CSS like above and preview/try it? Can I back up my whole site first, in case it breaks it?

Open to any advice. Want to do more cool stuff, but don't want to ruin it in advance of a job I'm applying for Monday. Thanks so much in advance!

16 hours ago, NoelM said:

I have created a site in Squarespace -
http://www.noelwork.org/

but consider myself an intermediate user, in that I've only used the templates so far - haven't tried to inject any Custom CSS.
But I want to make my navigation have some effects, like the one referenced above. I was going to enter it on my site, but see the warning:

      Warning: Adding custom CSS to your site can break your design.
      Please use caution when using this feature.
      Our support team will be limited in their ability to help you with
      design related issues if you have custom CSS.

So I'm nervous - is there a way to enter CSS like above and preview/try it? Can I back up my whole site first, in case it breaks it?

Open to any advice. Want to do more cool stuff, but don't want to ruin it in advance of a job I'm applying for Monday. Thanks so much in advance!

If CSS break your site, just remove it ;)

You can also duplicate your site & test code on the duplicated site. https://support.squarespace.com/hc/en-us/articles/206543627-Duplicating-pages-and-content

14 hours ago, tuanphan said:

If CSS break your site, just remove it 😉

You can also duplicate your site & test code on the duplicated site. https://support.squarespace.com/hc/en-us/articles/206543627-Duplicating-pages-and-content

Thanks so much for the tip on how to duplicate my site so I can try ideas out before going live! Much appreciated!!!

Good morning! I duplicated my site, and then tried out the code mentioned above:

.header-nav-item a:hover {
    color: red !important;
}

However, doing that did break three of my pages. Unfortunately, I tried it on both the main site, and also on the duplicated version of the site.

Please help! I just want to undo it now, and delete that code.

Here is my site:

http://www.noelwork.org/

And here are the three pages it broke - that is, the pages come up, but none of the content:

http://www.noelwork.org/visualizing-ideas

http://www.noelwork.org/reaching-audiences

http://www.noelwork.org/winning-opportunities

40 minutes ago, NoelM said:

Good morning! I duplicated my site, and then tried out the code mentioned above:

.header-nav-item a:hover {
    color: red !important;
}

However, doing that did break three of my pages. Unfortunately, I tried it on both the main site, and also on the duplicated version of the site.

Please help! I just want to undo it now, and delete that code.

Here is my site:

http://www.noelwork.org/

And here are the three pages it broke - that is, the pages come up, but none of the content:

http://www.noelwork.org/visualizing-ideas

http://www.noelwork.org/reaching-audiences

http://www.noelwork.org/winning-opportunities

 

Add to Page Settings > Advanced > Header

<style>
  .sqs-slice a:hover {
    border-bottom: 1px solid;
}
</style>

Thank you, but I don't see a "Header" category to click - only these categories (see screen cap below):

Hover page on Navigation (or Not linked) > Click Gear icon > Page Settings > Advanced > Header

NOT Home > Settings > Advanced > Code Injection

Thank you - I entered that code as you instructed on this page:

http://www.noelwork.org/visualizing-ideas

But the page has the same problem - none of the content is showing.

On 8/11/2020 at 10:41 PM, NoelM said:

Thank you - I entered that code as you instructed on this page:

http://www.noelwork.org/visualizing-ideas

But the page has the same problem - none of the content is showing.

Fine here. Did you solve?

Hi @tuanphan; wondering if you can help with a slightly similar issue...

I'm trying to style my nav menu on a site, by adding a colour to the page last visited. I've managed to do it with code that is working fine on desktop, but mobile just won't work. 

https://www.360sp.com.au/home1

Code I've used is:

.header-nav-item--active a {
  color: #69BD45 !important;
  background-image: none !important;
}

.Mobile-overlay-nav-item:last-child{
   color: #69BD45 !important;    
  }

Any help would be hugely appreciated!

Thanks!

On 12/19/2019 at 7:07 AM, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-item a:hover {
    color: red !important;
}

 

@tuanphan I am trying to update my site to have icons showing which disappear and become the regular nav text (icon disappears) on hover.  Any thoughts????

zetadesignstudio.com

pw: brineintopedro

On 1/20/2021 at 7:12 AM, HannahZoe said:

@tuanphan I am trying to update my site to have icons showing which disappear and become the regular nav text (icon disappears) on hover.  Any thoughts????

zetadesignstudio.com

pw: brineintopedro

It looks like you solved with this CSS?

.Header-nav--primary .Header-nav-item:nth-child(1),.Mobile-overlay-nav--primary .Mobile-overlay-nav-item:nth-child(1) {
    color: transparent !important;
    background-image: url('https://static1.squarespace.com/static/5f986304f5bf2b148c8de70c/t/600711aaaa01fb707b844ef9/1611076010244/crescent-moon.png');
    background-repeat: no-repeat;
    background-size: 55px 55px;
    background-position: center;
    padding: 30px 30px !important
}

.Header-nav--secondary .Header-nav-item:nth-child(1),.Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:nth-child(1) {
    color: transparent !important;
    background-image: url('https://static1.squarespace.com/static/5f986304f5bf2b148c8de70c/t/600711ac19210a77ecf81944/1611076012864/golden-spiral.png');
    background-repeat: no-repeat;
    background-size: 65px 65px;
    background-position: center;
    padding: 30px 30px !important
}

You can also target with link url, eg

.Header-nav-item[href="/about"],.Mobile-overlay-nav-item[href="/about"] {
    color: transparent !important;
    background-image: url('https://static1.squarespace.com/static/5f986304f5bf2b148c8de70c/t/600711aaaa01fb707b844ef9/1611076010244/crescent-moon.png');
    background-repeat: no-repeat;
    background-size: 55px 55px;
    background-position: center;
    padding: 30px 30px !important
}

.Header-nav-item[href="/book"],.Mobile-overlay-nav-item[href="/book"] {
    color: transparent !important;
    background-image: url('https://static1.squarespace.com/static/5f986304f5bf2b148c8de70c/t/600711ac19210a77ecf81944/1611076012864/golden-spiral.png');
    background-repeat: no-repeat;
    background-size: 65px 65px;
    background-position: center;
    padding: 30px 30px !important
}

@tuanphanyes, solved! thank you

Hello I used

}
.header-nav-item  a:hover {
    color: red !important;
}
div.header-nav-item a {
    transition: all 1s !important;
}

to have a slow red hover on the header menu and it worked beautifully. If I want to have a different hover color per section. Say: home in blue, contact in red, about in green. How could I edit this code to have a different hovering color for different sections in 7.1.?

@tuanphan your codes work great, any thoughts?

Thank you!!

On 3/2/2022 at 12:52 PM, LAUser said:

Hello I used

}
.header-nav-item  a:hover {
    color: red !important;
}
div.header-nav-item a {
    transition: all 1s !important;
}

to have a slow red hover on the header menu and it worked beautifully. If I want to have a different hover color per section. Say: home in blue, contact in red, about in green. How could I edit this code to have a different hovering color for different sections in 7.1.?

@tuanphan your codes work great, any thoughts?

Thank you!!

use nth-child(n), for example

.header-nav-item:nth-child(1)  a:hover {
    color: red !important;
}
.header-nav-item:nth-child(2)  a:hover {
    color: blue !important;
}
.header-nav-item:nth-child(3)  a:hover {
    color: green !important;
}
.header-nav-item:nth-child(4)  a:hover {
    color: violet !important;
}

16 hours ago, tuanphan said:

use nth-child(n), for example

.header-nav-item:nth-child(1)  a:hover {
    color: red !important;
}
.header-nav-item:nth-child(2)  a:hover {
    color: blue !important;
}
.header-nav-item:nth-child(3)  a:hover {
    color: green !important;
}
.header-nav-item:nth-child(4)  a:hover {
    color: violet !important;
}

 

That's super useful!! Say that nth-child(2) has a dropdown menu, If you'd like to select a different color for each element of the dropdown, how to do you categorize those?

On 3/4/2022 at 1:13 PM, LAUser said:

That's super useful!! Say that nth-child(2) has a dropdown menu, If you'd like to select a different color for each element of the dropdown, how to do you categorize those?

Use this code

.header-nav-item:nth-child(2) {
 .header-nav-folder-item:nth-child(1) a {
	color: red !important;
}
.header-nav-folder-item:nth-child(2) a {
	color: blue !important;
}
.header-nav-folder-item:nth-child(3) a {
	color: pink !important;
}
}