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

Hi @tuanphan thank you for your help with this. I've added the code to the footer code injection but it doesn't seem to be taking. I also tried it in the header for good measure, and didn't see any changes on the site. Let me know what you think, or if I should try something else. Thank you. 

Hi @tuanphan just following up on this item. Thank you in advance for your time and your expertise. 

Hi @tuanphan we ended up adding hover images for the landing page navigation (at the link below), until we are able to figure out the javascript code above. This way we achieve the hover affect. But we are having trouble formatting the code for mobile. Can you take a look for us and let us know what you recommend to do the horizontal list for mobile?

https://carillon-vibraphone-7w3k.squarespace.com/

Password: 3m!ily2021

Also, we applied the bold hover affect to the actual navigation on the profile, portfolio, and contact pages but the bold effect is REALLY bold, is there anyway to modify the font-weight of the hover on the other pages?

Screenshots, attached. Hopefully these will help. Any advice you have would be greatly appreciated. Thank you! 

On 11/3/2021 at 11:53 PM, dovely said:

Hi @tuanphan we ended up adding hover images for the landing page navigation (at the link below), until we are able to figure out the javascript code above. This way we achieve the hover affect. But we are having trouble formatting the code for mobile. Can you take a look for us and let us know what you recommend to do the horizontal list for mobile?

https://carillon-vibraphone-7w3k.squarespace.com/

Password: 3m!ily2021

Also, we applied the bold hover affect to the actual navigation on the profile, portfolio, and contact pages but the bold effect is REALLY bold, is there anyway to modify the font-weight of the hover on the other pages?

Screenshots, attached. Hopefully these will help. Any advice you have would be greatly appreciated. Thank you! 

Try this

.code-block a:hover {
    font-weight: 600 !important;
}

I'm using the Clove template and didn't see a code for it... I tried the Brine family code and it didn't work.

Do I just copy exactly what you have and change the colour like this (I changed the colour code under Nav item hover color):

/* Nav item color */
.Header-nav-item {
    color: #ff0000 !important;
}
/* Nav item hover color */
.Header-nav-item:hover {
    color: #87C656 !important;
}
/* Nav item active color */
.Header-nav-item--active {
    color: green !important;
}

Thank you!!

On 1/18/2022 at 8:55 AM, Zthomson said:

I'm using the Clove template and didn't see a code for it... I tried the Brine family code and it didn't work.

Do I just copy exactly what you have and change the colour like this (I changed the colour code under Nav item hover color):

/* Nav item color */
.Header-nav-item {
    color: #ff0000 !important;
}
/* Nav item hover color */
.Header-nav-item:hover {
    color: #87C656 !important;
}
/* Nav item active color */
.Header-nav-item--active {
    color: green !important;
}

 

Thank you!!

Use this new code

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

Phenomenal!! So helpful!!!!

Hi There! I am using SquareSpace 7.0 JasperJin template and I have been trying to figure out how to have a "primary active link" color on a mobile navigation. Right now, when the user is on mobile the menu navigation only has one color, so they don't know what page they are on (see photo attached). Is there simple css to plug in so that the "primary active link" on the mobile navigation can change color depending on which page the user is on like it is on desktop? 

On 1/11/2023 at 3:58 AM, RMK said:

Hi There! I am using SquareSpace 7.0 JasperJin template and I have been trying to figure out how to have a "primary active link" color on a mobile navigation. Right now, when the user is on mobile the menu navigation only has one color, so they don't know what page they are on (see photo attached). Is there simple css to plug in so that the "primary active link" on the mobile navigation can change color depending on which page the user is on like it is on desktop? 

Add to Design > Custom CSS

nav.mobile-secondary-nav-links .active a {
    color: #f1f;
}

Tested on: https://jasper-demo.squarespace.com/about-jasper

Hello I'm using white as the active folder color on my website. However, white is also displayed as the active color on the Header Navigation. The Header Navigation is a very light grey and the white active color barely shows up and seems to disappear. I do not want to change the active color for the folder to anything other than white. Please help me figure out how to make these two colors different.

Thanks,

Hello I'm using white as the active folder color on my website. However, white is also displayed as the active color on the Header Navigation. The Header Navigation is a very light grey and the white active color barely shows up and seems to disappear. I do not want to change the active color for the folder to anything other than white. Please help me figure out how to make these two colors different.

Thanks,

On 8/10/2023 at 2:41 AM, moni25 said:

Hello I'm using white as the active folder color on my website. However, white is also displayed as the active color on the Header Navigation. The Header Navigation is a very light grey and the white active color barely shows up and seems to disappear. I do not want to change the active color for the folder to anything other than white. Please help me figure out how to make these two colors different.

Thanks,

What is your site url? We can check easier

Trying to use this code in 7.1 (and it works), but to isolate and change color of only one of the navigation links (stationary position – not on hover/etc). Just want one link ("packages") to be red.

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

@ColeH_design can you share a link to your site?

@jaeveedee I was able to resolve issue using this code – but thank you!!
[href="/navigation page title here"] {
  color: #CB1F37 !important;
}