[Resolved] Links to #id of same page in Off Canvas Panel are all shown as if “current”

[Jessica]

Our site is just a very simple one page with various sections (e.g. #quienes-somos, #que-hacemos, etc.) but still, we’d like to have off-canvas menu where people may click to go directly to a certain section on the same page.

I have created the menu where the URL to each menu item is: /#section-name (e.g. /#quienes-somos, /#que-hacemos, etc.) because without the slash at the beginning, the links breaks when I tried to use the menu from the News section (which are blog posts).

But with the links set as such in the menu, ALL of the sections are then considered as if they are all “current”! (In Appearance > Customize > Colors > Off Canvas Panel, the three options are “initial”, “hover” and “current”)

What I would like to archieve is to be able to navigate through these different items on the menu though that are just different sections on the same page, as if how it would be so if each section were a separate page altogether, like follows:

Any insight on how may I set the menu item to be “current” only when the URL really has the section ID?
e.g. When I am at http://domain.com, the menu item “Inicio” would be the only “current” item but all other items maybe navigated through
When I am at http://domain.com/#quienes-somos, just the menu item “¿Quiénes somos?” is “current” item but all other items maybe navigated through.

Thanks a lot for your help!

[Fernando]

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. 🙂

[Jessica]

Sorry.. just fixed the images.

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

[Fernando]

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.

[Jessica]

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

[Fernando]

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.

[Jessica]

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!

[Fernando]

I see. Glad you got it to work!

You’re welcome Jessica!

[Author]

Posts