Jump to content

Header Nav Line Under Folders when Active

Recommended Posts

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
  • Replies 12
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.