Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Nav hover link colors


sarahrab

Question

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

Edited by sarahrab
Link to comment

7 answers to this question

Recommended Posts

  • 0
.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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...