ハンバーガーメニューがクリックしても出し入れできない

前提・実現したいこと

ハンバーガーメニューの出し入れをしたいです、その上でsliderも作用してほしいです

発生している問題・エラーメッセージ

SPサイズにしたときにハンバーガーメニュー自体は出るのですが、クリックしてもメニューが出ません。PCサイズではヘッダーを横並びにしたいのですが、SPサイズに合わせてコーディングするとPCサイズにしたときにヘッダーが消えてしまいます。
ハンバーガーメニューの出し入れができるような記述をするとsliderが機能しなくなり、ただの縦並びの画像になります。

該当のソースコード

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2　<!--Jquery-->
3  
4  <!--ハンバーガーメニュー-->
5
6<script src="htdocs/assets/js/common.js"></script>
7<link href="htdocs/assets/js/slick-theme.css" rel="stylesheet" type="text/css">
8<script  src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
9
10<!-- slickのCSS -->
11<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
12
13<script>
14      $(document).ready(function(){
15    $('.slider').slick({
16    autoplay:true,
17    autoplaySpeed:3000,
18    dots:true,
19    });
20  });
21  </script> 
22  <script
23  src="https://code.jquery.com/jquery-3.4.1.min.js"
24  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
25  crossorigin="anonymous"></script> 
26
27<!-- jQuery -->
28<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
29
30<!-- slickのJavaScript -->
31<script  src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
32 
33</head>
34<body>
35<header class="header">
36  <div class="logo"> 
37    <a href="index.html"><img src="htdocs/assets/images/common/logo_tsn-02.svg" alt="ロゴ" ></a>
38  </div>
39  <div id="open-button" class="open-button"> <span></span></div>
40  <nav>
41    <div id="close-button" class="close-button">×</div>
42    <ul>
43      <li><a href="first.html">はじめに</a></li>
44      <li><a href="#map">マップ</a></li>
45      <li><a href="experience.html">体験談</a></li>
46      <li><a href="inquiry.html">お問い合わせ</a></li>
47    </ul>
48  </nav>
49</header>
50<main>
51 <div class="section-top__image">
52      <div class="swiper-container">
53        <ul  class="slider">
54          <li><img title="岸壁の猫" src="htdocs/assets/images/top/IMG_1192.JPG" alt="岸壁の猫"></li>
55          <li><img src="htdocs/assets/images/top/IMG_1034.JPG" alt="振り向く猫"></li>
56          <li><img src="htdocs/assets/images/top/IMG_1222.png" alt="集まる猫"></li>
57          <li><img src="htdocs/assets/images/experience/IMG_1405.png" alt="公園の猫"></li>
58        </ul>
59      </div>
60 </div>
61</main>
62<footer class="footer">
63  <nav>
64    <ul class="footer_list">
65        <li><a href="first.html"> <img src="htdocs/assets/images/common/猫の足跡1.png" alt="猫の足跡">はじめに</a></li>
66        <li class="footer_map"><a href="#map"> <img src="htdocs/assets/images/common/猫の足跡1.png" alt="猫の足跡">猫マップ</a></li>
67      </ul>
68    
69      <ul class="footer_list2"> 
70        <li><a href="experience.html"> <img src="htdocs/assets/images/common/猫の足跡1.png" alt="猫の足跡">島猫体験談</a></li>
71        <li class="footer_list2_inquiry"><a href="inquiry.html"> <img src="htdocs/assets/images/common/猫の足跡1.png" alt="猫の足跡">お問い合わせ</a></li>
72    </ul>
73  </nav>
74  <div class="footer_sns_links">
75    <div class="instagram"> <a href="https://www.instagram.com/tobishima_neko_/"> <img src="htdocs/assets/images/common/glyph-logo_May2016.png" alt="" width="50"></a>
76      <p class="instagram_discription">Instagramも随時更新！</p>
77    </div>
78  </div>
79  <a href=""><img src="htdocs/assets/images/common/logo_tsn-02.svg" alt="" width="100"></a>
80  <div> <small class="site-title">©️しまねこ</small> </div>
81</footer>
82  <p id="scroll-top"><a href="#"><img src="htdocs/assets/images/common/PAGE_UP.png" alt="ページアップ"></a></p>

CSS
1(commnon.css)
2.header {
3  display: flex;
4}
5.header img {
6  width: 100px;
7  height: 199px;/*画像サイズ指定*/
8  margin: 0;
9  padding: 0;
10}
11.header nav {
12  display: block;
13}
14.header nav ul{
15  list-style: none;
16  display: block;
17  margin: 70px 140px 56px 0px;
18  padding: 0;
19  font-size: 2em;
20}
21.header nav ul li{
22  padding: 10px 10px 0 55px;
23}
24.open-button,.close-button {
25 display: none;
26}
27
28@media(max-width:1160px) {
29  .open-button {
30    display: block;
31    position: relative;
32    right: 10px;
33    top: 60px;
34    width: 40px;
35    height: 40px;
36    cursor: pointer;
37    padding-left: 55em;
38  }
39  .open-button span, .open-button span:before, .open-button span:after {
40    position: absolute;
41    height: 3px;
42    width: 25px;
43    border-radius: 3px;
44    background: #000;
45    display: block;
46    content:"";
47  }
48  .open-button span:before {
49    bottom: -8px;
50  }
51  .open-button span:after {
52    bottom: -16px;
53  }
54  .close-button {
55    display: block;
56    position: absolute;
57    top: 0;
58    right: 0;
59    color: #000;
60    font-size: 80px;
61    padding: 20px;
62  }
63  .header nav {
64    display: none;
65    z-index: 1000;
66    position: fixed;
67    top: 0;
68    left: 0;
69    background-color: #33cc99;
70    width: 70%;
71    height: 100%;
72    padding-top: 67px;
73    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.4);
74  }
75  
76  .header nav ul li {             
77    border-bottom: solid 1px rgba(255, 255, 255, 0.5);
78  }
79  .header nav ul li:first-child {             
80    border-top: solid 1px rgba(255, 255, 255, 0.5);
81  }
82  .header nav ul li a {
83    font-weight: 600;
84    line-height: 40px;
85    vertical-align: middle;
86    text-decoration: none;
87    color: #000;
88  }
89}
90@media(min-width:1160px) {
91  .header {
92    height: 83px;
93  }
94  .header-content-wrapper {
95    max-width: 1160px;
96    margin: 0 auto;
97    position: relative;
98  }
99  .header h1 {
100    font-size: 3.2rem;
101    padding-top: 26px;
102    position: absolute;
103    left: 0;
104    font-weight: 600;
105  }
106  .header nav {
107    display: block;
108    text-align: right;
109  }
110  .header nav ul {
111    display: flex;
112    justify-content: flex-end;
113  }
114  .header nav li a {
115    display: block;
116    padding: 26px 30px 0;
117    color: #000000;
118    text-decoration: none;
119    font-size: 2.4rem;
120    height: 83px;
121  }
122}
123
124  .footer nav ul {
125  display: flex;
126   margin: 70px 40px 20px 90px;
127  padding: 0;
128}
129.footer nav ul li {
130  padding: 0 66px;
131  display: flex;
132}
133.footer nav ul {
134   padding: 0 4vw 0 8vw;
135}
136.footer_menu {
137  padding-left: 140px;
138  text-align: left;
139}
140.footer_list,.footer_list2 {
141  font-size: 2em;
142}
143.footer_inquiry {
144  margin: auto;
145  text-align: left;
146  padding-left: 40em;
147}
148.instagram {
149  display:flex;
150  padding: 4rem 0 0 54rem;
151  margin: auto;
152}
153.instagram_discription {
154  padding: 10px;
155}
156#footer_logo {
157  margin: auto;
158}
159@media (min-width: 1160px) {
160  .footer {
161    padding: 70px 0 45px;
162  }
163  .footer-content-wrapper {
164    max-width: 1160px;
165    margin: 0 auto;
166  }
167  .footer .site-map {
168    padding: 0;
169    font-weight: 400;
170  }
171  .footer .site-map li {
172    padding: 0;
173    margin-bottom: 10px;
174  }
175  .footer__copyright {
176    font-size: 2.0rem;
177    font-weight: 400;
178  }
179}
180```CSS
181(top.css)
182.slider{
183    margin: 100px auto;
184    width: 80%;
185  list-style: none;
186}
187.slider img{
188    height: auto;
189    width: 100%;
190}
191/*slick setting*/
192.slick-prev:before,
193.slick-next:before {
194  color: #000;
195}
196
197
198```JS
199$('.close-button, .open-button').click(function () {
200    $('.header nav').slideToggle();
201  });

試したこと

JSを
$(function(){
$("nav").hide();
$('.close-button,.open-button').on('click',function(){
$('nav').toggle(300);
});
});
に変えるとハンバーガーメニューが反応するようになるのですが、PCサイズでのヘッダーが消えてしまいます。

CSS
.header nav
display: none;
にするとハンバーガーメニューをクリックした後のページを出せるのですが、閉じるボタンが効きません。

実際にこのサイトに記したコードだけで自分でもテストしましたが、ハンバーガーメニューはクリックしても開かないなど正常には動いていませんでした。(SafariとGoogleChromeで検証しましたが共にダメでした。)

</body>前にscriptが含まれているものを移動するとハンバーガーメニューはクリックで出し入れできるようになったのですが、sliderが動かない、という事態になりました。