Anchor link – main menu highlighting 2 items

[Joanna]

Hi there,

I would like to kindly ask for help. I have created a new menu item: services but it is a n anchor link to an area in the home page. Everything works fine but when you click on Services or Home both items are highlighted as active (screenshot attached) on the menu.

Is there a way to change that so that when I click Home it highlights home and when i click services it highlights only services?

Thank you,

Joanna

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

That’s because the Services is also from the Homepage.

Try to add this css to remove it from services.

.menu-item-727 .nav-line {
    display: none!important;
}

-Rui

[Joanna]

Hi,

“That’s because the Services is also from the Homepage.” But I guess that every anchor would be within some page right? I thought 1 page websites are also supported.

This solution does not help. When I add the code and click on Services the anchor does not go into beginning of the Services area and it does not highlight at all.

Another problem with anchor link: it is not clickable at all on the mobile device (with or without the code).

Are anchor links supported in dante at all?

Thank you,

Joanna

[Rui Guerreiro – SUPPORT]

In Dante that menu underline it’s made on load based on the id of the page that is loaded and doesn’t change in real time when you press an anchor link inside the same page.

The one page features that exist in Dante are like this demo page, check on the right side the one page navigation of Dante.
http://dante.swiftideas.com/home/home-five-one-page-wonder/

The mobile situation is also happening to me, Will forward to the dev team.

-Rui

[Joanna]

OK, thank you. So are you saying that in Dante I cannot use anchor links that will be added in the main menu? Do I understand well? Or should I still wait, as there might be some solution?

There seems to be many problems with this anchor link: not displaying correctly (extra underline), not going to the right place and most importantly not working on the mobile device.

Thank you,

Joanna

[Swift Ideas – Ed]

Hi @Joanna

If you remove the domain from the link then the smooth scroll will be activated, and the double link should not be there. If this isn’t an option for you – then we can look at writing some custom JS that would just set that on the homepage?

– Ed

[Joanna]

Hi Ed,

Yes,you are right we have tried that. The problem is that then the link is not working when switching from another page. For example from portfolio->services. So this is not good solution for me.

Thank you

Joanna

[Swift Ideas – Ed]

Yes, i’ve added some custom JS to adjust the link only on the homepage for you. In terms of the scroll position, I’d suggest increasing the height of the blank spacer you’ve used for Services.

Hope that helps.

– Ed

[Joanna]

Thank you for that but I am not sure how/if it solved anything? I can still see both links highlighted… I can live with the scroll, it is not a major problem but I am afraid that the bug with highlighting the menu is misleading for the visitors.

The only thing that changed is that now when I click on Services, only home is highlighted…

Thank you,

Joanna

[Joanna]

I have also increased the height of the blank spacer from 50 to 100 px but that does not seem to fix the issue either for the scroll position.

[Swift Ideas – Ed]

I’ve adjusted the code to fix the scroll position. What are you looking to happen with the indicator in the menu. It’s a little tricky, and the issue occurring in your instance is because the services is high up on the page, with no other sections being used. If you’d like, we can provide some code that will stop services being highlighted on the homepage at all?

– Ed

[Joanna]

I am confused now, I am not sure if we are looking at the same thing.

When I click on Services from home I am still not ending up on the correct scroll position. The spacer is above “Few things I love doing”. Please see the video where it clearly shows that it is not going in the right place: https://www.dropbox.com/s/e60xsso3dzw0nrd/Scroll.mov.zip?dl=0

What I want from the menu is to behave as normal menu: when I click on home it should underline/highlight home, when I click on Services it should highlight only that. Now I have double highlight of home and services. I simply want to highlight what I am clicking at the moment. If that is not possible then at least it would be nice when people land on my website for the first time to have only home highlighted.

If it is not possible, please just let me know and I will just leave it as it is or remove it at all.

Joanna

[Swift Ideas – Ed]

Please try clearing your browser cache, or the WP Super Cache on your site. When I try it, I go to above the title.

Ok so the highlight is determined by the current page, but also the current scroll item. Services will be highlighted when that section is visible on the page. I can add some code that will mean that the Home indicator is disabled when the Services is highlighted, if that is something you’d like. OR, we can provide some css that will mean that Home is the only one highlighted on the homepage.

Hope that helps.

– Ed

[Joanna]

I cleared cache for the browser and also deleted it in the WP Super Cache plugin and still the same. But this it doesn’t matter, I give up 🙂

The only thing if I can please ask you is provide me the below suggestion. I will give it a last try.

“I can add some code that will mean that the Home indicator is disabled when the Services is highlighted, if that is something you’d like.”

Thank you,

Joanna

[Swift Ideas – Ed]

Hi @Joanna

Apologies about that, found the cause and fixed it. Also sorted out the solution for removing the highlight from home.

Hope that helps – we don’t let our customers give up!

– Ed