Highlighted anchor in nav menu

Question

I have a WordPress system. The problem is my nav menu. I have a link to a subsite in my menu and an anchor point to a part of the main site.
So if I link the anchor like this: #test it works on the main site. If I want to click this on the subsite it doesn't work.

If I link the anchor like this: http://localhost/#test it works on the sub site.

But on the main page the anchor is highlighted. I know that it's because it's a current-menu-item, but I don't want it highlighted. I could style the class current-menu-item like the normal color.

But I want that the active link is highlighted.

My thoughts of the answer was that maybe I link it like this: #test and then I redirect the link to this: http://localhost/#test

But it would be nice if there is another solution. I could not find something about this topic in the www. If anyone has a nice documentation it would be nice.

Thank you for helping me :)

Answer 1

If you use it like this:
#test It refers to a anchor on the currently visited site.

So for the main site it will be
yourwebsite.tld/#test

On the subsite it will be
yourwebsite.tld/subside/#test

Very different things.

Use the full link so that the menu always points to the same fraction of information.

If you don't want the full link to be highlighted you will likely need to use JavaScript.

You can eg. add a class to all menu links with anchor tag - and take away the highlight effect.
Or you could compare every menu link with the current url in the url bar - if this is not a perfect match - add a class / or add a class if it is a perfect match.

Answer 2

So I have found a solution. I add some JS to remove the CSS class that add the highlight effect.

So this is working perfect. It was at the start a little bit difficult because I can't select the menu-item with getElementsByClassName. But with the querySelector it works fine.

The JS code looks like this:
For the first anchor:

document.querySelector("#menu-navigation-de-1 > li.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item.current_page_item.menu-item-home.menu-item-49874.nav-item").classList.remove("current-menu-item");

For the second anchor:

document.querySelector("#menu-navigation-de-1 > li.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item.current_page_item.menu-item-home.menu-item-300.nav-item").classList.remove("current-menu-item"); 

Thank you @ibes that you helped me. :)