モバイル端末でハンバーガーメニューが反映されない

ポートフォリオサイトを作成したのですが、モバイル端末でいわゆるハンバーガーメニューが表示されず参っています。どなたかお知恵をお借りできませんでしょうか。

ブレークポイントは550にしており、画面を手動で縮めた場合は思惑通りにハンバーガーメニューが表示されるのですが、Googleのtoggle device toolber機能を使ってスマホサイズのものを表示した場合、上記のとおり表示されないといった具合です。

使用しているものは
Mac OS：Big Sur バージョン11.2.1　　　　　　　　　　　　
ブラウザ　chrome　バージョン: 88.0.4324.150
エディタ　VS code バージョン: 1.53.2
になります。

コードは以下になります。
※htmlはヘッダーまでと終わりのみ

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="utf-8"><!--人間とPCの文字の対応表の一種-->
6  <title>OKA's Portfolio</title>
7  <link rel="stylesheet" href="normalize.css"><!--各ブラウザでデフォルトのスタイルを平均化する-->
8  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
9  <link rel="stylesheet" href="stylesheet.css">
10  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"><!--アニメーションを繰り返すCDN-->
11  <link href="https://fonts.googleapis.com/css?family=PT+Serif&display=swap" rel="stylesheet"><!--Googleフォント-->
12  <link href="https://fonts.googleapis.com/css?family=Cinzel&display=swap" rel="stylesheet">
13  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
14  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
15
16  <!-- ＃リンクのスムーズスクロール -->
17  <script>
18    $(function(){
19      // #で始まるリンクをクリックしたら実行されます
20      $('a[href^="#"]').click(function(){
21        // スクロールの速度
22        var speed = 400; // ミリ秒で記述
23        var href= $(this).attr("href");
24        var target = $(href== "#" || href == "" ? 'html' : href);
25        var position = target.offset().top;
26        $('body,html').animate({scrollTop:position},speed,'swing');
27        return false;
28      })
29    })
30  </script>
31</head>
32
33<body>
34<!--ヘッダー-->
35<header>
36  <div class="header-wrapper" id="5">
37    <li class="hide"><a href="#1">About Me</a></li>
38    <li class="hide"><a href="#2">Service</a></li>
39    <li class="hide"><a href="#3">Works</a></li>
40    <li class="hide"><a href="#4">Contact</a></li>
41
42  <!--????-->
43    <input id="menu" type="checkbox" />
44    <label for="menu" class="open"><div class="line"></div><div class="line"></div><div class="line"></div></label>
45    <label for="menu" class="back"></label>
46  <!--????-->
47    <aside>
48  <!--????-->
49    <label for="menu" class="close">×</label>
50    <!--????-->
51    <nav>
52      <ul>
53        <li><a href="#1">About Me</a></li>
54        <li><a href="#2">Service</a></li>
55        <li><a href="#3">Works</a></li>
56        <li><a href="#4">Contact</a></li>
57      </ul>
58    </nav>
59  </aside>
60  </div>
61</header>
62
63
64      <script src="jquery-2.2.4.min.js"></script>
65      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
66      <script src="jquery.waypoints.min.js"></script>
67      <script src="jquery.magnific-popup.min.js"></script>
68      <script src="mobile-detect.min.js"></script>
69      <script src="main.js"></script>
70      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
71      <script src="jquery.waypoints.min.js"></script>
72
73</body>
74
75</html>

css
1html,body {
2  font-family:"Open Sans",sans-serif;
3  font-family:"italic",serif;
4}
5body {
6  margin:0;
7}
8h1 {
9  font-size:50px;
10}
11p {
12  font-size:30px;
13}
14
15.header-wrapper {
16  background:black;
17  color:white;
18  width:100%;
19  height:42px;
20  list-style:none;
21  text-align:right;
22  padding-top:9px;
23}
24.hide {
25  display:inline;
26  margin-right:15px;
27  position:absolute;
28  left:-100px;
29  a {
30    text-decoration:none;
31    color:white;
32  }
33}
34
35
36.open,
37.close {
38  display:block;
39}
40.line {
41  width:20px;
42  height:3px;
43  background-color:white;
44  margin:3px;
45}
46.open {
47  position:absolute;
48  left:94vw;
49  font-size:20px;
50
51}
52.close {
53  font-size:30px;
54}
55aside {
56  position:absolute;
57  top:-250px;
58  width:100%;
59  height:150px;
60  transition: all 0.2s;
61  background:rgba(0,0,0,0.7);
62  display:flex;
63  flex-direction:column;
64  li {
65    list-style:none;
66    color:white;
67  }
68  a {
69    text-decoration:none;
70    color:white;
71  }
72}
73input[type="checkbox"] {
74  position:absolute;
75  left:-50vw;
76}
77/*input checkboxと同列の要素　〜は、これ以降の要素で指定したものという意味　この場合はaside*/
78input[type="checkbox"]:checked ~ aside {
79  top: 42px;
80}
81input[type="checkbox"]:checked ~ .back {
82  position:absolute;
83  width:100%;
84  height:100%;
85  background: rgba(0,0,0,0.8) !important;
86}
87
88.top-wrapper {
89  height:600px;
90  background-image: url("yamagiri2.jpg");
91  background-size:cover;
92  h1,p {
93    text-align:center;
94    margin:0;
95    color:white;
96    text-shadow:5px 0 5px black;
97  }
98  
99}
100.top-text{
101  padding-top:280px;
102}
103
104.about-wrapper {
105  position:relative;
106  width:auto;
107  height:950px;
108  background-size:cover;
109  padding-bottom:50px;
110  background-image:url("bridge.jpg");
111}
112.about-box {
113  position:absolute;
114  width:auto;
115  height:1000px;
116  background:rgba(0,0,0,0.5);
117  text-align:center;
118  
119  h1,p {
120    margin:0 auto;
121    color:white;
122  }
123  h1 {
124    padding:30px 0;
125    
126  }
127  img {
128    border-radius:50%;
129    width:200px;
130    height:auto;
131  }
132  p {
133    padding:50px;
134    text-align:left;
135  }
136}
137
138.service-container {
139  padding:0;
140  margin:0;
141}
142.service-wrapper {
143  position:relative;
144  width:auto;
145  height:1950px;
146  background-image:url("cafe_mac.jpg");
147  background-size:cover;
148  padding-bottom:50px;
149}
150.service-box {
151  position:absolute;
152  width:auto;
153  height:1950px;
154  background:rgba(0,0,0,0.5);
155  text-align:center;
156  h1,h2,span,p {
157    color:white;
158    display:block;
159  }
160  h1 {
161    padding:30px 0;
162    font-size:60px;
163  }
164  h2 {
165    padding:0 auto;
166    margin-bottom:0;
167    font-size:35px;
168  }
169}
170.each {
171  text-align:center;
172  padding:20px 50px;
173  img {
174    width:400px;
175    border-radius:50%;
176  }
177  span {
178    font-size:50px;
179  }
180}
181.point2 {
182  margin-left:70px;
183  text-align:left;
184}
185
186.works-container {
187  position:relative;
188  width:100%;
189  height:1800px;
190  background-image:url("itadaki.jpeg");
191  background-size:cover;
192}
193.works-window {
194  position:absolute;
195  width:100%;
196  height:1800px;
197  background:rgba(0,0,0,0.3);
198  h1 {
199    padding-top:20px;
200    font-size:60px;
201    color:white;
202    text-align:center;
203  }
204}
205.each-window {
206  margin:50px auto;
207  text-align:center;
208  list-style:none;
209  img {
210    width:380px;
211    text-align:center;
212  }
213  h2,p,a {
214    color:white;
215    text-align:center;
216    text-decoration:none;
217  }
218  h2 {
219    font-size:40px;
220  }
221}
222
223footer {
224  background-image:url("renga.jpg");
225  background-size:cover;
226  text-align:center;
227}
228.contact-title {
229  svg {
230    margin-bottom:50px;
231  }
232  h1 {
233    font-size:60px;
234    margin-top:30px;
235    display:inline-block;
236  }
237}
238.contact-text {
239  font-size:40px;
240}
241
242.follow-wrapper {
243  text-align:center;
244}
245.follow-me {
246  
247  li {
248  list-style:none;
249  display:inline-block;
250  margin:100px;
251  }
252}
253.size {
254  font-size:5em;
255  color:black;
256}
257.gm {
258  margin-right:110px;
259}
260.tw {
261  margin-left:110px;
262}
263.copy {
264  background:black;
265  width:100%;
266  height:80px;
267}
268#copyright {
269  padding-top:30px;
270  p {
271    color:white;
272    font-size:16px;
273    text-align:center;
274    padding:50px auto;
275  }
276}
277
278.top-back {
279  a {
280    text-decoration:none;
281    color:black;
282  }
283}
284
285@media (min-width: 550px){
286  /* ???? */
287  .open,
288  .close {
289  display:none;
290  }
291
292  .service-wrapper {
293    height:2100px;
294  }
295  .service-box {
296    height:2100px;
297  }
298  .point {
299    text-align:left;
300  }
301  .works-container {
302    height:1000px;
303  }
304  .works-window {
305    text-align:center;
306    height:1000px;
307  }
308  .each-window {
309    display:inline-block;
310    margin-right:30px;
311    img {
312      width:260px;
313    }
314  }
315  .hide {
316    position: static;
317    left:100px;
318    a {
319    text-decoration:none;
320    }
321  }
322}
323
324@media (min-width: 900px){
325  .about-wrapper {
326    height:1070px;
327  }
328  .about-box {
329    height:1120px;
330    img {
331      width:45%;
332    }
333  }
334  .each-window {
335    img {
336      width:380px;
337    }
338  }
339}
340
341@media (min-width: 1300px){
342  .about-wrapper {
343    height:1200px;
344  }
345  .about-box {
346    height:1250px;
347  }
348}

誠にお手数ではございますが、お知恵をお貸しいただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

<head>内に以下の記述追加で解消しないでしょうか。

html
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

投稿2021/02/18 08:31

mai1210

総合スコア272

Kei-Kei

2021/02/18 14:30

有難うございます！解決に至りました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

モバイル端末でハンバーガーメニューが反映されない

関連した質問