Archived topic
Menu doesn´t collapse
9 replies · Started by afuente26 on September 4, 2021
Hello,
I have some anchor links in my new website. My problem is, that the menu doesn´t collapse after clicking on it.
It seem something trivial, but it disturb a lot.
Is there any solution?
Thanks
Angel
Hi there,
Let's try adding some javascript:
1. Add a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. As the content, add this:
<script>
var subMenuLinks = document.querySelectorAll( 'nav .sub-menu a' );
for ( var link = 0; link < subMenuLinks.length; link++ ) {
subMenuLinks[link].addEventListener( 'click', function( e ) {
subMenuLinks[link].closest( '.toggled-on' ).classList.remove( 'toggled-on' );
subMenuLinks[link].closest( '.sfHover' ).classList.remove( 'sfHover' );
} );
};
</script>3. Set the hook to wp_footer
4. Set the Display Rules to "Entire Site".
Let us know if that does the trick or not :)
Hello,
it didn´t work ;-(
Hi there,
if i right click inspect your site, i am seeing a 404 error related to a missing scroll.js file.
Do you know what that file is ? As i think we need to get rid of that error first then retry Toms method.
hello david,
yes, there was an old link to scroll.js. It was just an attemp to mak the scroll smooth with all browser. But this is not longer in use. It was just one line in the ><head>, nothing else....
I disabled the Element ( saved as Draft ) containing the current script Tom provided.
Remove that script and try this:
<script>
var subMenuLinks = document.querySelectorAll('nav .sub-menu a');
function dbHandleClick(evt) {
for (var y = 0; y < subMenuLinks.length; y++) {
if ( subMenuLinks[y] == evt.target ) {
evt.target.closest('.toggled-on').classList.remove('toggled-on');
evt.target.closest('.sfHover').classList.remove('sfHover');
}
}
}
window.addEventListener("click", dbHandleClick);
</script>Hello David,
still doesn´t work.....
I made a slight adjustment to the code on your site.
Try it now.
Great. Now it works. Could you say me what you did? Just for not to ask anymore... I had the issue already other times....
(is the hook still needed?)
Thanks a lot. like everytime, great great support.
Awesome - yes the Hook is still required.
The code i provided above had a little bit of code that won't display correctly in the forum. Which was having a letter i inside square brackets []. Forum thinks i am adding italic text for some weird reason.
So i fixed that on your site.
And for reference i updated the code above to using [y] for the counter:
https://generatepress.com/forums/topic/menu-doesnt-collapse/#post-1920340
