Links to #id of same page in Off Canvas Panel are all shown as if "current"

Hi Jessica,

The shared images aren’t viewable: https://share.getcloudapp.com/X6uRNYrp

Can you kindly re-share them again?

Moreover, for us to get a better understanding of the issue, can you also share the link to the site in question?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon. :)

Sorry.. just fixed the images.

The site URL is
https://prevista.siervasdelplandedios.org

Thank you for adding the images.

Adding a / automatically adds the current-menu-item class to your anchor tags. May I know what occurs when the / is removed? Can you try removing them and I’ll check from my end what’s occurring? Can you also share the link to your site?

If you remove the /, one thing we can do is add the current-menu-item class manually through JS.

For instance, we can add class anchor-link to your menu items as such: https://share.getcloudapp.com/9ZuoXYd6

Then, create a Hook Element hooked to wp_footer with this code:

<script>
var anchorLinks = document.querySelectorAll( '.anchor-link' );
const anclen = anchorLinks.length;
for ( var i = 0; i < anclen; i++ ) {
    anchorLinks[ i ].addEventListener( 'click', function() {
				for ( var b = 0; b < anclen; b++ ) {
					anchorLinks[ b ].classList.remove('current-menu-item');
				}
        this.classList.add('current-menu-item');
    } );
}
</script>

Here it is working from my end: https://share.getcloudapp.com/qGuONgrB

Kindly let us know.

Here is the screenshot of removing the slash before the #id from"¿Quiénes somos?" and "¿Qué hacemos?"

The navigation in the menu works BUT it breaks when I want to use the menu from the Noticias section..

Because the noticias section URL is something like this:
https://domain.com/?page_id=116

And if I were to use the menu while I'm in the Noticias page, it breaks because it tries to reach this URL that doesn't exists..
https://domain.com/?page_id=116#quienes-somos

I see.

To check, can you try going to Settings > Permalinks, and set the setting to Post name. Example: https://share.getcloudapp.com/o0uG8klJ

Or, something like this with /%post_id%/ in a Custom Structure if you want the id to appear: https://share.getcloudapp.com/4gur95E9

Kindly let us know how it goes.

Thanks for pointing out that "Adding a / automatically adds the current-menu-item class to your anchor tags."
The fact that I can't remove the back slash in my menu links because the link breaks without it if I were to use this menu in another section (e.g. "Noticias" or blog posts).

Thanks for your instructions. Did almost everything as you said except that I have changed the javascript code a little bit to make it works.

1. Added "anchor-link" class to all my menu items starting with a back slash (e.g. /#quienes-somos, /#que-hacemos, etc)
2. Added a hook to be in "wp-footer" with the following script, which just simply remove "current-menu-item" from its class list.

<script>	
var anchorLinks = document.querySelectorAll('.anchor-link');
const anclen = anchorLinks.length;

for ( var i = 0; i < anclen; i++ ) {
	anchorLinks[ i ].classList.remove('current-menu-item');	
};
</script>

Thanks so much for your help!

I see. Glad you got it to work!

You’re welcome Jessica!