Nav hover link colors

Site URL: https://minnow-koi-y72b.squarespace.com/

Hi there,

In my header nav, I'd like the links to have the color #fe5e2d when hovered over and active. In the nav, I have a folder "Services" with 3 menu items within it. When I'm on one of those pages, it appears that they have the color but also the old spotlight effect on hover, making them appear faded. How do I remove the spotlight and just have them in the color I want? I'm using Squarespace 7.1. My site can be viewed at this link with password wholeyou.

This is the code I'm currently using:

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

/* Nav item active color/
.header-nav-item a:active {
    color: #fe5e2d !important;
      background-image: none !important;
}

/* Nav item active no underline*/
.header-nav-item--active a {
      background-image: none !important;
}

wholeyou.

incorrect password

@tuanphan password is wholeyou without the period at the end.

.header-nav-item>a:hover {
    color: #fe5e2d !important;
}
.header-nav-folder-item:hover a {
    color: #fe5e2d !important;
}
/* desktop*/
.header-nav-item--active>a {
    color: #fe5e2d !important;
}
/* mobile */
.header-menu-nav-item--active>a {
    color: #fe5e2d !important;
}
/* folder */
.header-nav-folder-item--active a {
    color: #fe5e2d !important;
}

Thanks @tuanphan! The color is working, but it's still looking like there's the spotlight effect on hover in the folder items only. Is there any way to remove that?

Your site is private. Can you setup password & share url again?

@tuanphan the site is https://minnow-koi-y72b.squarespace.com/ and password is wholeyou 

15 hours ago, sarahrab said:

@tuanphan the site is https://minnow-koi-y72b.squarespace.com/ and password is wholeyou 

Add to Home > Design > custom CSS

/* Folder hover */
.header-nav-folder-item a:hover {
    color: green !important;
}
/* Folder active */
.header-nav-folder-item.header-nav-folder-item--active a {
    color: green !important;
}