CODEWITHSUNDEEP
javascriptjqueryzurb-foundationzurb-foundation-6responsive-navigation
Cofey
Cofey

Reputation: 11404

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

Upvotes: 4

Views: 500

Answers (1)

duellsy
duellsy

Reputation: 8577

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

Upvotes: 3

Related Questions