Jump to content

Jump links not underlined when active in navigation bar

Recommended Posts

Site URL: https://www.marcelchenier.com

After all day searching through the forums, I never found an answer for this.

I'm using 7.1 and in my navigation bar (header), I have two anchor links, one to the bio on the home page, one to the footer with the contact info. The other navigation elements which go to different pages (home, gallery, shop) get underlined when active, but these two do not. Any help would be greatly appreciated.

Link to comment
20 minutes ago, NEC said:

Site URL: https://www.marcelchenier.com

After all day searching through the forums, I never found an answer for this.

I'm using 7.1 and in my navigation bar (header), I have two anchor links, one to the bio on the home page, one to the footer with the contact info. The other navigation elements which go to different pages (home, gallery, shop) get underlined when active, but these two do not. Any help would be greatly appreciated.

what is your protected password?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Have you solved it yet? I checked the 'jump' navigator buttons get underlined when active

image.thumb.png.3a8f664f7e925a948f7e43b2a3620285.png

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
14 hours ago, NEC said:

Yeah, I already had Home, Gallery and the Shop all underlined when active. I want Contact and Bio to be likewise underlined when active.

What is your site url?

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

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
15 hours ago, NEC said:

Yeah, I already had Home, Gallery and the Shop all underlined when active. I want Contact and Bio to be likewise underlined when active.

You can try adding to Home > Setting > Advanced > Code Injection > Footer

<script >
    const navBtns = document.querySelectorAll('.header-display-desktop .header-nav-item');
navBtns.forEach((button, i) => {
    button.addEventListener('click', () => {
        const navActiveBtns = document.querySelectorAll('.header-display-desktop .header-nav-item--active');
        navActiveBtns.forEach(activeBtn => {
            activeBtn.classList.remove('header-nav-item--active');
        })
        // Check if link has # or not, default has process the underlink
        if (!button.querySelector('a').matches("[href*='#']")) return;
        button.classList.add('header-nav-item--active');
    });
});

</script>

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 10/11/2021 at 8:37 PM, NGO2045 said:

I have the same problem! Any solution? 🙂

If you want to disable the underline effect in navigator, you can add to Custom Css

.header-nav-wrapper  .header-nav-item > a{
  background: unset !important;
}

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
21 hours ago, bangank36 said:

If you want to disable the underline effect in navigator, you can add to Custom Css

.header-nav-wrapper  .header-nav-item > a{
  background: unset !important;
}

 

Thanks! Unfortunately, the code does not seem to work for me to disable the underline effect.

 

Edit: Solved it

Edited by NGO2045
Link to comment

The code injection for the footer?

And now I've changed the Contact navigation to go to a different contact page, and still it's still not underlined when active.

If it helps, in my Pages menu, the ones that get underlined when active show up with a page icon (or a shopping cart for the Shop), but the Contact and Bio show up with a link icon next to it.

Edited by NEC
Link to comment

Have you added the script into code injection yet? 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi bangank36,

Yes, I did, exactly as you suggested before and it didn't work. I even tried it again, following the video in case I'd missed something the first time. I even tried it in the header. Still no change: Home, Gallery & shop all work fine, but BIO and CONTACT do not (see my screen shots above). 

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.