Header Navigation Active Color Question

Site URL: https://kirklinchristianchurch1.squarespace.com/

Hey guys,

On the site i'm building, I have folders with the site pages in them. I'm using the code here:

//Add color to active folder
.header-nav-item--active a {
  color: #f56600 !important;
 }

It colors the active folder, but the color spills over into the rest of the folder, so all the pages in the folder are highlighted. Is there a way to just have the folder highlighted? And maybe underline the specific page i'm on?? Might be too tall an order 😅 Thanks in advance!

Password: 1234

On 2/3/2022 at 11:29 AM, ben2345 said:

Site URL: https://kirklinchristianchurch1.squarespace.com/

Hey guys,

On the site i'm building, I have folders with the site pages in them. I'm using the code here:

//Add color to active folder
.header-nav-item--active a {
  color: #f56600 !important;
 }

It colors the active folder, but the color spills over into the rest of the folder, so all the pages in the folder are highlighted. Is there a way to just have the folder highlighted? And maybe underline the specific page i'm on?? Might be too tall an order 😅 Thanks in advance!

Password: 1234

You can try the following code in Home > Design > Custom Css to setting color for the active navigator

body:not(.header--menu-open) .header-nav-wrapper .header-nav-item--active > a, 
body:not(.header--menu-open) .header-nav-wrapper .header-nav-folder-item--active > a {
  color: red;
}

Let me know how it works on your site