Active Nav Item Color (with folder)

Hi all,

I am trying to change the color of my active nav items, but that have a folder. Does anyone know how to do this?

Thanks!

Can you share site url? We can check code easier.

Hey tuanphan,

I have similar issue like the post above.

I have pages in Navigation Folder that change color correctly when the page is active. I also have a shortcut link of the same page in the navigation. I cannot get that link to look active in both the Navigation Folder and on the navigation main line.

Please see attached screenshot.

Here is the CSS code I used:

/* NAV LIST BACKGROUND */
.header-nav-folder-content {
   background: #EEEEEE !important;
}

/* NAV REMOVE UNDERLINE */
.header-nav-item--active a{
  background: unset !important;
}
header a {
background-image: none !important;
}

/* NAV HOVER COLOR */
.header-nav-item a:hover {
    color: #C4262E !important;
    transition-duration: 0.3s;
}

/* NAV ACTIVE COLOR */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
background-image: none !important;
color: #C4262E !important;
}
 

On 11/5/2022 at 11:45 AM, adamspicar said:

Hey tuanphan,

I have similar issue like the post above.

I have pages in Navigation Folder that change color correctly when the page is active. I also have a shortcut link of the same page in the navigation. I cannot get that link to look active in both the Navigation Folder and on the navigation main line.

Please see attached screenshot.

 

Here is the CSS code I used:

/* NAV LIST BACKGROUND */
.header-nav-folder-content {
   background: #EEEEEE !important;
}

/* NAV REMOVE UNDERLINE */
.header-nav-item--active a{
  background: unset !important;
}
header a {
background-image: none !important;
}

/* NAV HOVER COLOR */
.header-nav-item a:hover {
    color: #C4262E !important;
    transition-duration: 0.3s;
}

/* NAV ACTIVE COLOR */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
background-image: none !important;
color: #C4262E !important;
}
 

What is site url?

Hey @tuanphan

Can you help me please, to add an underline and another color (white) on an active nav items within a folder?
I already solved it on simple pages with this code:

//Navigation active Link//
.Header-nav-item--active { border-bottom: 2px solid white;
color: white !important; }

By the way I hid the first child with this code:
//Navigation hide first child//
.Header-nav-folder-item:first-child { display:none;}

I added screenshots, how it should look like.

The other question is, can I add another color (#D5417B) on the secondary navigation when it’s active?
I used the following code, so that is looks like a button:

// secondary navigation Button Style //
.Header-nav--secondary .Header-nav-item:last-child {
   background: white;
   color: black !important;
   padding: 7px 13px !important; }

The site url is: https://pigeon-ocelot-j5lf.squarespace.com/
The password is: umoweb

Thank you!

On 12/6/2022 at 10:04 PM, benja said:

Hey @tuanphan

Can you help me please, to add an underline and another color (white) on an active nav items within a folder?
I already solved it on simple pages with this code:

//Navigation active Link//
.Header-nav-item--active { border-bottom: 2px solid white;
color: white !important; }

By the way I hid the first child with this code:
//Navigation hide first child//
.Header-nav-folder-item:first-child { display:none;}

I added screenshots, how it should look like.

 

The other question is, can I add another color (#D5417B) on the secondary navigation when it’s active?
I used the following code, so that is looks like a button:

// secondary navigation Button Style //
.Header-nav--secondary .Header-nav-item:last-child {
   background: white;
   color: black !important;
   padding: 7px 13px !important; }

 

The site url is: https://pigeon-ocelot-j5lf.squarespace.com/
The password is: umoweb

 

Thank you!

Hi,

Currently Folder Item is a Link Item or Standard Page?

As far as I know, with standard page, when users is on page, SS will add a class as -active, we can easily target it. But it doesn't have that right now, so I'm guessing you used Link Item.

@tuanphan I used a linked index page within the folder. 

Do I understand you correctly that it is not possible to add another color and an underline?

On 12/12/2022 at 9:28 PM, benja said:

@tuanphan I used a linked index page within the folder. 

Do I understand you correctly that it is not possible to add another color and an underline?

Yes. Not possible with Link Item. You need to use JavaScript code to solve this. Do you still need this? I will try test some code

On 12/16/2022 at 10:10 AM, tuanphan said:

Yes. Not possible with Link Item. You need to use JavaScript code to solve this. Do you still need this? I will try test some code

@tuanphanIf it's possible, it would be super nice, but it's totally fine if not 🙂 

Hi @tuanphan our client is having a similar issue with their site. We've used custom CSS to modify the link color, but the change isn't taking for the folder links. Would you be able to take a look and let us know what you recommend? The link is below, along with a screenshot. Thank you! https://www.bleugracedesigns.com/whole-homes-remodels

On 12/22/2022 at 10:09 PM, benja said:

@tuanphanIf it's possible, it would be super nice, but it's totally fine if not 🙂 

Just an update if you need this in future... this is possible with CSS code, recently solved some similar cases 😄 (except anchor links)

On 9/20/2023 at 11:09 PM, Dovely2023 said:

Hi @tuanphan our client is having a similar issue with their site. We've used custom CSS to modify the link color, but the change isn't taking for the folder links. Would you be able to take a look and let us know what you recommend? The link is below, along with a screenshot. Thank you! https://www.bleugracedesigns.com/whole-homes-remodels

What is problem here?