CODEWITHSUNDEEP
wordpress
NewToCode
NewToCode

Reputation: 61

Closing Wordpress Twenty Fourteen mobile menu on click

I'm using the wordpress twenty fourteen theme. When the site resizes down onto a mobile it automatically brings the menu toggle up, so you click it and the menu slides down. When I click a menu item, the page then slides down to reveal the content, the only problem is the menu doesn't close like it would if you were going to a new page.

Any ideas on how I can close the menu when an item is clicked?

EDIT:

I've ahd a look in the js code and noticed

button.on( 'click.twentyfourteen', function() {
        nav.toggleClass( 'toggled-on' );
        if ( nav.hasClass( 'toggled-on' ) ) {
            $( this ).attr( 'aria-expanded', 'true' );
            menu.attr( 'aria-expanded', 'true' );
        } else {
            $( this ).attr( 'aria-expanded', 'false' );
            menu.attr( 'aria-expanded', 'false' );
        }
    } );

which seems to deal with the opening and closing of the menu, is there a way to apply that to the menu links so they close it when they are clicked?

EDIT 2

I've also found the following in the doucment ready code

$('.toggle').click(function(){
        $('.main_nav').slideToggle();

Upvotes: 0

Views: 409

Answers (1)

user5201742
user5201742

Reputation:

Did you have any script error? if not, it's the behaviour of the theme. Usually, the hamburguer menu have a click event, so it adds or removes a class from the menu elem to display the <ul> menu or not. So, you can add a class for the <li> elems with anchor, and attach a new event "click" to the hamburguer to add / remove class or use hide / show functions.

Upvotes: 0

Related Questions