I’ve written some JavaScript to open and close the overlay menu on phone and tablet in portrait mode. It works great on mobile in portrait and landscape. On tablet in portrait mode the menu is the overlay menu opened by clicking the hamburger icon, but the desktop menu bar when in landscape because of Divi’s built in media queries. The issue is if a user opens the overlay menu on tablet and turns their device to landscape with the menu open the class I’ve added to prevent scrolling is still active and locks the screen from scrolling in landscape, even though the overlay menu is not displaying anymore.

I tried writing a conditional statement to close the overlay menu and remove the remove_scroll class when a tablet is rotated, but it doesn’t work. Is there a way to tell the browser to close the overlay menu when the device is rotated/the display width changes and remove the remove_scroll class with JavaScript?

Here is the JavaScript I wrote. I have a feeling I am mixing jQuery and vanilla JavaScript and there could be a simpler way to write this, but this is what I came up with with what I know right now. The .remove_scroll class is styled with overflow: hidden; in the CSS.

jQuery(document).ready(function(){
    document.querySelector('.burger').onclick = function(){
        document.getElementById('myNav').style.width = '100%';
        jQuery('body').addClass('remove_scroll');
    };
    document.querySelector('.closebtn').onclick = function(){
        document.getElementById('myNav').style.width = '0%';
        jQuery('body').removeClass('remove_scroll');
    };
    });

jQuery(document).ready(function(){
    let mobnav = document.getElementById('myNav');

    if('mobnav.style.width == 100% && window.innerWidth >= 980px'){
        function (){
            mobnav.style.width = '0%';
            jQuery('body').removeClass('remove_scroll');
        };
    };
});