Складное меню JQuery открывается при прокрутке только с мобильного телефона

Question

проблема с функцией jquery.У меня есть несколько событий изменения размера, которые сворачивают навигацию при определенной ширине.Работает нормально с рабочего стола, но на телефоне меню открывается, когда я начинаю прокручивать страницу вниз при первой загрузке страницы.Как только я закрываю его и снова прокручиваю страницу вниз, все в порядке.Не могу понять это.Любая помощь очень ценится.

//---HIDE AND OPEN MENU ON BUTTON CLICK---//
$('#mobile_menu_btn').click(function () {
    $('nav ul').slideToggle('fast', function () {
        $(this).css('display') == 'none' ? $(this).removeClass('showNav').addClass('hideNav').removeAttr('style') : $(this).removeClass('hideNav').addClass('showNav').removeAttr('style');
    });
})

//---TRIGGER AUTOMATIC MENU BUTTON CLICK AT SPECIFIED PAGE WIDTH---//
window.addEventListener('resize', resize);
function resize() {
    if (window.innerWidth < 550) {
        jQuery(function () {
            jQuery('#mobile_menu_btn').click();
        });
        window.removeEventListener('resize', resize);
    }
}

//---TRIGGER AUTOMATIC MENU BUTTON CLICK AT SPECIFIED PAGE WIDTH ON PAGE LOAD ONLY ---//
if (window.innerWidth < 550) {
    jQuery(function () {
        jQuery('#mobile_menu_btn').click();
    });
}

JSFiddle