Menu icon Foundation
toggled.zf.responsiveNavigation not firing

toggled.zf.responsiveNavigation isn't firing for me. 

$('[data-responsive-toggle]').on('toggled.zf.responsiveNavigation', function(e){
	console.log('hello world');
});

Any ideas on what I'm doing wrong would be appreciated.

responsive navigationjavascripttoggleevents

toggled.zf.responsiveNavigation isn't firing for me. 

$('[data-responsive-toggle]').on('toggled.zf.responsiveNavigation', function(e){
	console.log('hello world');
});

Any ideas on what I'm doing wrong would be appreciated.

Snig over 1 year ago

Colin,

I have a vague memory of encountering a similar problem a while back...eventually I figured out I needed to use toggled.zf.responsiveToggle instead of toggled.zf.responsiveNavigation. 

For example in one site (using Foundation 6.4.3) I use the following code to detect the toggle and change the class of the menu button from a hamburger to a cross and vice versa...

$('.title-bar').on('toggled.zf.responsiveToggle', function(e) {
	$('#menubutton').toggleClass('cross');
});

with a title bar definition that looks like this:

<div class="title-bar" data-responsive-toggle="topmenu" data-hide-for="medium">
	<button id="menubutton" class="burger" type="button" data-toggle="topmenu"></button>
	<div class="title-bar-title">
		Menu
	</div>
</div>

<div class="top-bar" id="topmenu">
	<div class="top-bar-left">
....
</div>
</div>

(This is in conjunction with 'burger' and 'cross' styles from the very useful SAS Burger mixin -  see: https://github.com/jorenvanhee/sass-burger).

Hope this helps.

Cheers, Snig