[Resolved] Auto Collapse Mobile Menu

[Alex]

I’m working with a single-page site that uses section id’s for the nav menu links. When viewing on a mobile screen, the mobile menu stays open after clicking a link. I would like to have the mobile menu automatically collapse when a menu item is clicked. Is there a theme option for this that I am missing, or will this need to be accomplished by adding a jquery script?

[Tom]

Hi Alex,

This code might help: https://gist.github.com/generatepress/6e122667d28cabd23582

Let me know 🙂

[Alex]

Hi Tom,

Yes, works perfectly! thank you 🙂

[Tom]

You’re welcome 🙂

[Steve]

Hello – i tried to strip the jquery off the smooth scroll ability since iam using “page scroll 2 id”.
It is working like intended but I never used jquerys before so would you mind taking a look? (i fear that i added bugs or take infinite ram or something bad)

<script>
jQuery( document ).ready( function( $ ) {
      $( document ).on( 'click', '.main-nav li > a:first-child', function( e ) {
		var mobile = $( '.menu-toggle' );
		if ( mobile.is( ':visible' ) ) {
			$( '.menu-toggle').closest( '.main-navigation' ).removeClass( 'toggled' );
			$( '.menu-toggle').closest( '.main-navigation' ).attr( 'aria-expanded', $( '.menu-toggle').closest( '.main-navigation' ).attr( 'aria-expanded' ) === 'true' ? 'false' : 'true' );
			$( '.menu-toggle').removeClass( 'toggled' );
			$( '.menu-toggle').children( 'i' ).addClass( 'fa-bars' ).removeClass( 'fa-close' );
			$( '.menu-toggle').attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
		}
    });
});
</script>

[Leo]

Hi Steve,

Looks like the same block of code as Tom provided here: https://generatepress.com/forums/topic/responsive-menu-and-anchor-links/#post-273558 so it should be good!

[Steve]

Oh i didnt found that.
Thank you very much.

[Leo]

You’re welcome 🙂

[Tom]

The next version of GP does this for you automatically, so you’ll be able to remove that JS.

[Author]

Posts