Change Color of each Navigation link on Hover and when active

Hello guys!

Is it possible to change the colour of each navigation link on Hover and Active for Squarespace version 7.1? I am using Mark Novo template! 

Ex:  I want the 'Product' text link to turn blue when hovered and remain blue (bold) when active and I want the Video text link to turn red when hovered and red (bold) when active.  

If none of the navigation links are hovered or clicked, I want them to remain 'grey'.

Help please!

Add to Home > Design > Custom CSS

/* nav hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: red !important;
}
/* av active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: green !important;
}

Hello @tuanphan 

Thank you for your help I applied your code into my website and it made a lot of difference. 

I have a follow up question.

Here is the link for my website:

https://caterpillar-antelope-zbjy.squarespace.com

password: ptphoto

At the moment, I have four navigation links: About, Projects, Films and Shop.

If I hover on 'About' I wonder if it is possible for the text to appear 'Red' and remain red when I visit About (active).

If I hover on 'Projects', I want the text to appear 'Yellow' and remain Yellow when I visit About Projects(active).

If I hover on 'Films', I want the text to appear 'Blue' and remain Blue when I visit Projects(active).

If I hover on 'Shop', I want the text to appear 'Orange' and remain Orange when I visit Shop(active).

Please do excuse my demands and thank you in advance for helping me out. 

HEY IT WORKED FOR ME!

Thank you so much for your support : )

This worked so well! Thank you thank you thank you!

On 6/3/2020 at 4:18 PM, tuanphan said:

Add to Home > Design > Custom CSS

/* nav hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: red !important;
}
/* av active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: green !important;
}

 

Hi!

I tried both of the codes that you posted here and this one is exactly what i'm looking for but I would like to have different colors on each navigation link and the same color for the folder links.

I have three navigation links that are all folders:
Inrikting
Om Stiftelsen Vi
Kontakt

So, I would like to get each nav link different coloured and their folder titles to be the same.

Thank you in advance!

On 4/29/2023 at 8:38 PM, EcarolineO said:

Hi!

I tried both of the codes that you posted here and this one is exactly what i'm looking for but I would like to have different colors on each navigation link and the same color for the folder links.

I have three navigation links that are all folders:
Inrikting
Om Stiftelsen Vi
Kontakt

So, I would like to get each nav link different coloured and their folder titles to be the same.

 

Thank you in advance!

What is your site url? We can adjust code easier

It worked for me on desktop as well. Since the hover effect is not possible on mobile, I would like to have a red active button without the underline. The links are nested within folders, resulting in two underlines—one for the parent folder and one for the actual link—which I don't like at all. 

This is the code I'm using:

.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: red !important;
}
/* av active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: red !important;
}

Thank you!

On 7/9/2024 at 4:08 PM, dragoslazarin said:

It worked for me on desktop as well. Since the hover effect is not possible on mobile, I would like to have a red active button without the underline. The links are nested within folders, resulting in two underlines—one for the parent folder and one for the actual link—which I don't like at all. 

This is the code I'm using:

.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: red !important;
}
/* av active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: red !important;
}

Thank you!

Can you share link to your site? We can check problem easier

share your site link?