Responsive offcanvas toggler - hide the menu when greater than 576px

[emage]

I have bind the offcanvas to the the bootstrap hamburger menu. The toggler hamburger menu only shows up when the viewport is below 576px.

Everything works great here when i click the toggler and the menu slides in.

The issue now is that when i resize the browser to greater than 576px - which will hide the hamburger - the offcanvas menu is still visible.

Is there a way to toggle it base on viewport?

I tried using the :

// update the nav DOM - greater than 576px Nav.close(true);

[somewebmedia]

Have you tried using maxWidth option?

[emage]

@somewebmedia thanks for the quick reply.

The maxWidth does work, but maybe i'm doing something wrong because it looks like the script is not removing the 'hc-nav-open' from the BODY so it still has that gray opacity cover. So although the menu does close - the dark 'body:after` overlay still there -- probably have to script that part manually?

Any advice is appreciated. Thanks

[somewebmedia]

Hi, sorry for late response.

Update to the latest version and use this:

$(window).on('resize', function() {
  if ($(window).width() > 576 && Nav.isOpen()) {
    Nav.close(true);
  }
});