调整窗口大小时，不会隐藏“关闭画布”菜单

Question

Please help!!! Im working on the off canvas menu( https://codepen.io/oleksiukmary/pen/MEGpZj ). The problem is when mobile menu is open and user resize the window - content has still transform property and overlay. How can i go back to initial parameters when user resizes the window? Should i just check via js if window resize is morethan 768px (my breakpoint) and then hide overlay and transform content?

My js:

 $(document).ready(function() {
  $('#nav-toggle').click(function(){
    if($(this).is(":checked")) {
      $('.content-wrap').css('transform', 'translateX(80%)');
    } else {
      $('.content-wrap').css('transform', 'translateX(0)');
    }
    $('body').toggleClass('overflow-hidden');
    $('#c-mask').toggleClass('is-active');
  });

  $('#c-mask').click(function() {
    $('#overlay').fadeOut('slow');
    $(this).removeClass('is-active');
    $('#nav-toggle').prop('checked', false);
    $('.content-wrap').css('transform', 'translateX(0)');
  });
});

Answer 1

Use $( window ).resize(function() to detect the window size and deactivate the offcanvas

  $( window ).resize(function() {
if ($(window).width() > 768) {
$('#overlay').fadeOut('slow');
$('#nav-toggle').prop('checked', false);
$('.content-wrap').css('transform', 'translateX(0)');
}
});

Answer 2

Try with this code block

$( window ).resize(function() {
  if($( window ).width() > 768) {
    $('.content-wrap').css('transform', 'translateX(0)');
  }
});