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

Header Nav Line Under Folders when Active


Question

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!

Link to comment
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

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

 

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

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!!

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

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

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

 

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