[Jeff FParticipant]

I have customized my mobile navigation with the icon found here.. http://codepen.io/rictorres/pen/ycudz . It currently runs the toggle event

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.

[RadModerator]

Hi Jeff,

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.

[Jeff FParticipant]

Unfortunately this didn’t work in the customize > javascript area. I was directed to use something along the lines of this but I can’t get it to work either.

$("#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);
    }
});

[RadModerator]

Hi Jeff,

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.

[Jeff FParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,
Would you please add the code below into Customize -> Custom -> Javascript:

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.

[Jeff FParticipant]

So this disabled the animation all together as you can find here http://www.farrfolio.com

[RadModerator]

Hi Jeff,

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!

[Jeff FParticipant]

Thank you that worked!

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[iBobbyMacParticipant]

what was the final outcome of this script? I’d like to add the same thing – was the script copied from http://codepen.io/rictorres/pen/ycudz and the menu in the x theme modified to have the id “menu” or what was the solution?

[JadeModerator]

Hi there,

Would you mind providing us with the URL so that we can provide you with the answer tailored for your needs? Thank you.

[iBobbyMacParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thank you for providing your url and login.

To achieve a similar effect, kindly do the following.

1. Create file _nav-primary.php in your child theme in wp-content/themes/x-child/framework/views/global
and copy the code below into that file

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================

?>

<a href="#" id="menu" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <span></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
</div>

2. Add this under Custom > CSS in the Customizer.

#menu {
  background: transparent;
  font-size: 1.5em; 
  width: 3em;
  height: auto;
  box-shadow:none;
}

#menu span {
  background: #27b9e5;
  display: block;
  position: relative;
  -webkit-transform: translate3d(0,0,0);
}

#menu span,
#menu span:before,
#menu span:after {
  width: 100%;
  height: .2em;
  -moz-transition:       all 0.4s;
  -o-transition:         all 0.4s;
  -webkit-transition:    all 0.4s;
  transition:            all 0.4s;
  -webkit-transform: translate3d(0,0,0);
}

#menu span:before,
#menu span:after {
  background: #27b9e5;
  content: " ";
  margin-top: -.6em;
  position: absolute;
}

#menu span:after {
  margin-top: .6em;
}

#menu.on span {
  background: transparent;
}

#menu.on span:before {
  -moz-transform: rotate(45deg) translate(.5em, .4em);
  -ms-transform: rotate(45deg) translate(.5em, .4em);
  -o-transform: rotate(45deg) translate(.5em, .4em);
  -webkit-transform: rotate(45deg) translate(.5em, .4em);
  transform: rotate(45deg) translate(.5em, .4em);
}

#menu.on span:after {
  -moz-transform: rotate(-45deg) translate(.45em, -.35em);
  -ms-transform: rotate(-45deg) translate(.45em, -.35em);
  -o-transform: rotate(-45deg) translate(.45em, -.35em);
  -webkit-transform: rotate(-45deg) translate(.45em, -.35em);
  transform: rotate(-45deg) translate(.45em, -.35em);
}

.x-btn-navbar.collapsed {
    box-shadow:none;
}

3. Add this under Custom > Javascript in the Customizer.

jQuery( function($) {
jQuery("#menu").on("click touchend",function(event) {
        event.preventDefault(); 
	jQuery("#menu").toggleClass('on');
});
});

Hope that helps.

[iBobbyMacParticipant]

For future upgrades of the theme won’t it overwrite this file? I could just add the id=”menu” into the existing file but I guess I’d have to go delete the class icon bars to ensure only my new bars displayed… hmm. I’ll just have to keep a backup and fix it on upgrades.

Any way – thanks for this! It’s awesome and a cool feature! You guys should offer it!! Thank you again!

I had one other issue not related to this.. my visual composer within the cornerstone appears to not be working… only text mode. Am I missing a plugin? I had removed some of the old visual composer items and I’m not sure if I removed something required.

[Author]

Posts