4

I'm using Foundation's Responsive Navigation to display a Hamburger icon for mobile. For the life of me, I cannot figure out how to apply a class to the body element when the mobile menu is displayed (after the Hamburger icon is clicked)

Can someone tell me what I'm doing wrong? Currently, the only thing that happens when toggling the Hamburger is the style attribute "display: none" is toggled on the .mobile-nav div. I know there's nothing wrong with the JavaScript set up outside of this issue, as I'm able to see other console.log() statements.

<a href="#" class="burger" data-toggle>-</a>

<div class="mobile-nav" id="mobile-nav">
  <ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown">
    <li><a href="#">Link 1</li>
    <li><a href="#">Link 2</li>
  </ul>
</div>

Here's what I've tried, but nothing ever appears in the console:

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

$('.mobile-nav').on('toggled.zf.responsiveNavigation', function () {
    console.log('responsive navigation toggled');
});

$('#mobile-nav').on('toggled.zf.responsiveNavigation', function () {
    console.log('responsive navigation toggled');
});
Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Cofey
  • 11,144
  • 16
  • 52
  • 74
  • Didn't look too hard, but it looks like you might be missing data-binding attributes on the div .mobile-nav – mattdevio Aug 31 '16 at 17:06

1 Answers1

3

This is pretty late, but we had the same issue today and found that there's another event that is thrown that you can utilise:

toggled.zf.responsiveToggle

reference: https://github.com/zurb/foundation-sites/issues/9191

duellsy
  • 8,497
  • 2
  • 36
  • 60