Can someone please help me? I am currently working on an off-canvas menu (you can find it here). The issue I am facing is that when the mobile menu is open and a user resizes the window, the content still retains its transform property and overlay. How can I reset everything to their initial parameters when the window is resized? Should I use JavaScript to check if the window resize is greater than 768px (my breakpoint) and then hide the overlay and transform the content back?
This is my current JavaScript code:
$(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)');
});
});