How to underline the active menu item on a custom menu

Hi FunkyCSS,

You could try adding a JS script like this to add a class to the “selected item” through a Hook Element hooked to wp_footer:

<script>
var anchorLinks = document.querySelectorAll( '.custom-filtering > .mycontainerinput > .container-input > a' );
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-product-active');
				}
        this.classList.add('current-product-active');
    } );
}
</script>

Example: https://share.getcloudapp.com/P8uQbRdX

Then, add this CSS in Appearance > Customize > Additional CSS:

a.current-product-active {
    font-weight:bold;
    text-decoration:underline;
}

Hope this helps!

Hi there,

Thank you so much for the super fast response! I tried this and make huge sense, but unfortunately does not work.

Maybe because I am using AJAX for the content

There was a typo in my selector in the JS. I’ve edited the code on top to correct this.

Can you try again and see how it goes?

Wow! This works like a charm! Thank you so so much!

I was trying to fix this like 3 days !!!!

<3

You're welcome! Sorry, I edited the selector again. I thought the All anchor was under the same selector. It should be correct now.

Yes now it works better! Thank you Fernando - amazing support!

You’re welcome! Glad that worked!