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 🙂