Jump links not underlined when active in navigation bar

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.

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?

Oh, hi: SWMarcel

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

I have the same problem! Any solution? 🙂

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

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?

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

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

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

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.

Here's what my Pages menu looks like:

Bangank, I tried the code injection in the footer, nothing changes.

Are we sure we don't want this in the header? I tried the code there too but it didn't help.

@tuanphan

My url is in the OP: https://www.marcelchenier.com

Have you added the script into code injection yet? 

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!

I have the same problem, jump links across my site aren't underlined when active.. any solutions?

URL https://lime-raspberry-ywg5.squarespace.com/

PW GSR123

Jump links are all in the services folder and on the /towing page (alternative navigation)

Any help much appreciated 🙂

On 3/31/2023 at 7:53 AM, kellicox90 said:

I have the same problem, jump links across my site aren't underlined when active.. any solutions?

URL https://lime-raspberry-ywg5.squarespace.com/

PW GSR123

Jump links are all in the services folder and on the /towing page (alternative navigation)

Any help much appreciated 🙂

You mean links on this dropdown?

@tuanphan exactly