How to apply class to body element using Foundation's Responsive Navigation?

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');
});

Answers:

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.