调整响应式导航栏的大小

Question

所以我制作了一个响应式导航栏：在普通视图（1200px）处，它是并排显示的内联块元素。当我将它缩小到767px时，它变成了一个切换按钮。所以当点击它时，它会在块中打开导航栏。当我再次点击它时它会关闭。现在，当我重新调整到完整的1200px时，导航栏就消失了。 我想它与关闭菜单有关，当我在767px时然后再次出现，当我回到1200px但是我无法弄清楚

这是我的jquery代码：

$('.js--nav-icon').click(function(){
    var nav = $('.js--main-nav');
    var icon = $('.js--nav-icon i');
    nav.slideToggle(200);
    if(icon.hasClass('ion-navicon-round')) {
        icon.addClass('ion-close-round');
        icon.removeClass('ion-navicon-round');
    } else {
        icon.addClass('ion-navicon-round');
        icon.removeClass('ion-close-round');
    }