jQuery(“#menu”).click(function(event) {
event.preventDefault();
jQuery(this).toggleClass(“on”);
});

to animate from a “3 bar” to an “x” as the menu opens and closes. I have it running on my website http://www.farrfolio.com but the problem is if you click it twice fast it will display the wrong state. I believe this is so because it’s running a different toggle event than the one with the menu.

My question is where in the js library can I find the toggle event so I can sync them.

Appreciate any direction.

Thanks for posting in.

Could you try this one ?

jQuery("#menu").click(function(event) {
  event.preventDefault();
	jQuery('.x-nav-collapse').promise().done(function(){
		jQuery("#menu").toggleClass("on");
	});
});  

X menu is based on bootstrap framework where javascript files are compiled and minified. It will be be not that easy and we do not support any modification of core files.

Thanks.

$("#general_show").click(function () {
    var $this = $(this);
    if ($this.hasClass('selected')) {
        $this.removeClass('selected').parent().next().hide();
    } else {
        $this.addClass('selected').parent().next().show();
    }
    return(false);
});

$(document).click(function (e) {
    if ($('#general_info').is(':visible') &&
          $(e.target).parents('#general_info').length === 0) {
      $('#general_show').removeClass('selected').parent().next().hide();
      return(false);
    }
});

What is #general_show? I can only see #menu as mobile menu toggle’s ID.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

jQuery(“#menu”).off('click').on('click', function(event) {
	event.preventDefault();
	jQuery(this).toggleClass(“on”);
});

This code disables all theme related click events for the hamburger button then adds your code there. Check if this solves the problem.

Hope it helps.

Menu toggle should happen after menu collapse animation. Since your toggling it on and off without checking if the collapse animation is finished, then you will animate the menu button regardless of collapsed status.

As given before, this should work.

jQuery("#menu").click(function(event) {
  event.preventDefault();
	jQuery('.x-nav-collapse').promise().done(function(){
		jQuery("#menu").toggleClass("on");
	});
});  

Though, seems like animation event isn’t attached to .x-nav-collapse so it isn’t working. Just use this one to make it faster, real time checking of collapsed status.

setInterval ( function(){

if ( jQuery('.x-nav-collapse').hasClass('in') ){
	jQuery("#menu").addClass('on');
}
else {
	jQuery("#menu").removeClass('on');
}

}, 300 );

Already added at your customizer’s custom javascrip.

Cheers!