Archived topic
Auto Collapse Mobile Menu
8 replies · Started by Alex on September 23, 2016
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?
Hi Alex,
This code might help: https://gist.github.com/generatepress/6e122667d28cabd23582
Let me know :)
Hi Tom,
Yes, works perfectly! thank you :)
You're welcome :)
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>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!
Oh i didnt found that.
Thank you very much.
You're welcome :)
The next version of GP does this for you automatically, so you'll be able to remove that JS.
