How to handle `toggled.zf.responsiveToggle` event?

I’m using responsive navigation on my website and need some help with handling this event.

<nav class="title-bar" data-off-canvas-sticky data-responsive-toggle="responsiveNavbar" data-hide-for="medium">

This is how my HTML looks.
So far, I’ve tried:

$('.title-bar').on('toggled.zf.responsiveToggle', function() {console.log("Hi");});

But I can’t see anything on the console when I try to toggle the navigation bars by adjusting the viewport. Please help me use this event.
Thanks.

Hi, please provide the exact Foundation Sites version and a reproducible testcase as codepen.

I’ve created a new pen on CodePen. Please have a look at it.

To put it simply, I just want to know when the navbar gets toggled.

The toggled.zf.responsiveToggle is for the hamburger menu in the responsive menu.

See the method: https://get.foundation/sites/docs/responsive-navigation.html#togglemenu

What you probably want is to watch the breakpoint changes. For this take a look at https://get.foundation/sites/docs/media-queries.html#working-with-media-queries and https://get.foundation/sites/docs/media-queries.html#watching-for-breakpoint-changes

1 Like

Thanks, watching for the breakpoint changes didn’t cross my mind.