响应式菜单问题

(首先,如果我的英语有时很糟糕,我会道歉,我是法国人,所以详细解释一切都很难)

我正在个人网站上工作,但我的响应式导航问题出了问题.

我对1024px以下的屏幕尺寸进行了媒体查询.

当我高于1024px时,我的常规导航栏有一个列表.当我在1024px以下时,我看到了出现的小菜单标识,上面的点击事件使整个菜单显示并消失.

但问题是如果我的菜单关闭并且我将窗口扩展到1024像素以上,则列表不可见,我不知道如何处理该问题.

这是我的代码:

Jquery点击:

$(function(){
  $("#button_nav").click(function () {
      if(!$("#show_n_hide_nav").is(":visible")){
          $("#show_n_hide_nav").slideDown("slow");
      } else {
          $("#show_n_hide_nav").slideUp("slow");
      }
  });
});

在我的CSS中,我将原始列表隐藏在1024像素以下,并在用户点击菜单徽标时在jquery的帮助下显示它.

再次,抱歉,如果这很难理解.