Header Nav Line Under Folders when Active

Site URL: https://fulcrum-diligence.squarespace.com/

I'm sure this is super simple, but would be very grateful if someone could let me know where I am going wrong please!!

I have included this CSS to have both change of colour on hover and a line underneath each nav item when on that page (active).

It works for normal page items, but doesn't appear underneath the folder nav items when any of the items under the folders are active. This is what I have:

.Header-nav-item:hover {
  color: #00b5e2 !important;
}
.header-nav-folder-item--active {
    border-bottom: 2px solid #00b5e2;
}
.Header-nav-item--active {
    border-bottom: 2px solid #00b5e2;
}

Password to site is fulcrum

Thank you in advance!

Use this code

/* folder */
.header-nav-folder-item--active a {
    border-bottom: 2px solid #000000;
}

Hi Tuanphan, 

Thanks so much for helping! I've tried that but it still doesn't work for some reason sorry? It's still blank underneath when clicked on. Any chance you have any other ideas? Thank you!

On 3/10/2021 at 6:20 PM, viccismarshall said:

Hi Tuanphan, 

Thanks so much for helping! I've tried that but it still doesn't work for some reason sorry? It's still blank underneath when clicked on. Any chance you have any other ideas? Thank you!

Try adding this

a.Header-nav-item.Header-nav-item--active {
    color: black !important;
    border-bottom: 2px solid black !important;
}

Hello, 

Thank you so much for this - it seems to work on the normal pages on the nav, but not the nav folders; I have this css to change the drop down on the folders - is this interrupting it do you think?

// Folder Pointer //

.Header-nav-folder:before {
content: '';
color: hsl(192, 100%, 45%);
display: block;
width: 0;
height: 0;
border-width: 0 0 15px;
border-style: solid;
border-right: solid 15px transparent;
border-left: solid 15px transparent;
position: absolute;
top: -15px;
left: 50%;
margin-left: -15px
}

// Main Folder //

.Header-nav-folder {
border-top: solid 5px hsl(192, 100%, 45%) !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 150%;
text-align: center;
align-content: center;
left: -99999 !important;
margin-left: -110px !important;
width: 220px;
z-index: 1002;
padding: 1em;
opacity: 0;
white-space: nowrap;
-webkit-transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
-ms-transform: translate3d(0, 10px, 0);
-o-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
-webkit-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
-moz-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
-ms-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
-o-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
transition: left 0s .2s ease-out, transform 0s .2s linear, opacity 0.2s ease-out;
}

Thank you!!

On 3/22/2021 at 8:21 PM, viccismarshall said:

Hello, 

Thank you so much for this - it seems to work on the normal pages on the nav, but not the nav folders; I have this css to change the drop down on the folders - is this interrupting it do you think?

// Folder Pointer //

.Header-nav-folder:before {
content: '';
color: hsl(192, 100%, 45%);
display: block;
width: 0;
height: 0;
border-width: 0 0 15px;
border-style: solid;
border-right: solid 15px transparent;
border-left: solid 15px transparent;
position: absolute;
top: -15px;
left: 50%;
margin-left: -15px
}

// Main Folder //

.Header-nav-folder {
border-top: solid 5px hsl(192, 100%, 45%) !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 150%;
text-align: center;
align-content: center;
left: -99999 !important;
margin-left: -110px !important;
width: 220px;
z-index: 1002;
padding: 1em;
opacity: 0;
white-space: nowrap;
-webkit-transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
-ms-transform: translate3d(0, 10px, 0);
-o-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
-webkit-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
-moz-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
-ms-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
-o-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
transition: left 0s .2s ease-out, transform 0s .2s linear, opacity 0.2s ease-out;
}

Thank you!!

Hi. Sorry for the delay. Do you still need help?

@tuanphan Hey!! i've used code to make a line appear under the page names in nav when you hover but is there a way to make the line stay on the active page?

On 9/3/2021 at 5:55 AM, charlieredel said:

@tuanphan Hey!! i've used code to make a line appear under the page names in nav when you hover but is there a way to make the line stay on the active page?

Hi,

Can you share link to your site? We can check easier

@tuanphan yep! https://tutufilms.squarespace.com/config/ thats the site and the password is tutufilms 🙂

On 9/3/2021 at 5:55 AM, charlieredel said:

@tuanphan Hey!! i've used code to make a line appear under the page names in nav when you hover but is there a way to make the line stay on the active page?

Hi,

It looks like you solved with this CSS?

body:not(.header--menu-open) .header-nav-item--active a {
    background-repeat: repeat-x;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0);
    background-size: 1px 1px;
    background-position: 0 calc(100% - 0.1em);
}

@tuanphan i did thank you!! 🙂

@charlieredel Did you ever figure this out? How to get nav items in a folder to underline on hover? I've tried all the suggestions in this thread and none work. Thanks!

On 3/17/2023 at 6:54 AM, FluentStudios said:

@charlieredel Did you ever figure this out? How to get nav items in a folder to underline on hover? I've tried all the suggestions in this thread and none work. Thanks!

What is your site url? We can help easier