Jquery Menu for Mobile Navigation automatically pops out

Question

I have used a JQuery mobile navigation, that is used @979 wide screens. The problem I have is that when the screen is re-sized to 979px wide, the menu pops up but fully extended and covers the content of the web page. I know this is something to do with the JQuery but cannot figure it out. Here is the script:

$(".menu-btn").click(
function(){
$("header nav ul").slideToggle();//Slide 1st level navigation on click
    }
);

$(window).on('resize',function(){
    if($(this).width() > 979){
        $('header nav ul').removeAttr('style');
    }
});

Answer 1

Does it disappear when more or less than 979px? Obviously, this part of code handles it:

$(window).on('resize',function(){
    if($(this).width() > 979){
        $('header nav ul').removeAttr('style');
    }
});

When you resize the screen, this line - $('header nav ul').removeAttr('style') - simply drops entire style attribute of the element. Seems like the menu is hidden by having inline CSS set, i.e. style="display: none" and thus the menu appears when your code removes style attr.