Jump to content

Nav hover link colors

Recommended Posts

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

Link to comment
  • sarahrab changed the title to Nav hover link colors
  • Replies 7
  • Views 1.4k
  • Created
  • Last Reply
.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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.