Почему не выполняется JQuery скрипт?

$(window).resize( function () {
           if (window.innerWidth <= 576) {    //При ширине экрана < 576px
            $('.nav-burger').on('click', function () { // При клике по label-у 
             $('.Menu').fadeIn(1);  //Внизу появляется меню
            $('.nav-burger').css('background-image', 'url("img/icon-cross.svg")', 'no-repeat');  // Картинка  изначально  стоит "Бургер", при клике меняется на "Крестик"
              
          Вопрос 1: // Как сюда  дописать  скрипт, который при клике еще раз на $('.nav-burger') скрывает 
           $('.Menu') и возвращает картинку "Бургер", никак не могу это реализовать... 
                
               $('.Onf' ).on('click', function() { // При клике на a-шку меню 
                $('.nav-burger').css('background-image', 'url("img/icon-menu.svg")', 'no-repeat');  // 
                Появляется картинка "Бургер"
                $('.Menu').fadeOut(1); // Меню скрывается
                                                   });
                });
            }
               Вопрос 2: //Как заставить эту часть скрипта работать так как нужно???:
                else { // Иначе
                if (window.innerWidth > 576) { // При ширине > 576px
                $('.burger').removeClass('.Menu'); // В див-обертке бургер меню удаляется класс, 
                   стилизующий меню при ширине 576 px и < 
                $('.burger').addClass('.Menuf'); //  В див-обертке бургер меню добавить класс, 
                                                           стилизующий меню при ширине десктопной версии
                $('#About').fadeIn(1); // Так же добавляется тег <hr>, изначально скрытый в медиазапросах при максимальной  ширине 576px
                 }
             }
             });