ハンバーガーメニューが表示されない

レスポンシブの際、ハンバーガーメニューを出したいのですが、何度やっても表示されません。
どこがおかしいのかご指摘頂ければ幸いです。

HTML
1    <div class="header-inner">
2      <h2 class="logo"></a></h2>
3      <div class="header-links">
4        <nav class="menu">
5          <a href=""</a>
6          <a href=""</a>
7          <a href=""</a>
8          <a href=""</a>
9        </nav>
10        <a href="" class="hamburger">
11          <span></span>
12          <span></span>
13          <span></span>
14        </a>
15      </div>
16    </div>

CSS
1  .header-links {
2    position: fixed;
3    width: 100%;
4    top: 100px;
5    left: 100%;
6    background: rgba(255, 255, 255, 0.95);
7    height: 100vh;
8    z-index: 10;
9    transition: all 0.4s;
10  }
11  .menu {
12    top: 40%;
13    right: 40%;
14    font-size: 15px;
15    transform: translate(-50%, -50%);
16  }
17  .hamburger {
18    position: absolute;
19    right: 10px;
20    top: 50%;
21    transform: translateY(-50%);
22    transition: all 0.4s;
23    width: 30px;
24    height: 20px;
25    z-index: 100;
26    display: block;
27  }
28  .hamburger span {
29    display: inline-block;
30    transition: all 0.4s;
31    position: absolute;
32    width: 100%;
33    height: 2px;
34    background: #000;
35  }
36  .hamburger span:nth-of-type(1) {
37    top: 0;
38  }
39  .hamburger span:nth-of-type(2) {
40    top: 50%;
41    transform: translateY(-50%);
42  }
43  .hamburger span:nth-of-type(3) {
44    bottom: 0;
45  }
46  .sp__header-links.is-active {
47    left: 0;
48  }
49  .hamburger.is-active span:nth-of-type(1) {
50    transform: translateY(9px) rotate(-315deg);
51  }
52  .hamburger.is-active span:nth-of-type(2) {
53    opacity: 0;
54  }
55  .hamburger.is-active span:nth-of-type(3) {
56    transform: translateY(-9px) rotate(315deg);
57  }

JS
1  $(".hamburger").on("click", function () {
2    $(this).toggleClass("is-active");
3    $(".header-links").toggleClass("is-active");
4  });

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

回答2件

ざっとコードをみてみました。
おそらく全てのコードを書いていないように見受けられます。
判断材料が足りないため、なんとも言えない感じです。

ただ、はっきりとダメだとわかる点として

<a>がない

aが閉じられていない

この2点はおかしいです。

できる限り元の形を保ってきちんと表示されるサンプルを作成しました。
htmlファイルにペーストすることで動作します。
画像は下記のサイトのものを配置しています。
https://tsukatte.com/hamburger/

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="robots" content="noindex,nofollow" />
7    <title>homePage</title>
8    <style>
9        body {
10            width: 100%;
11            margin: 0;
12            padding: 0;
13        }
14
15        .header {
16            width: 100%;
17            margin: 0 auto;
18        }
19
20        .logo {
21            width: 335px;
22            height: 300px;
23            background-size: contain;
24            background-repeat: no-repeat;
25            background-position: center;
26            background-image: url(hamburger-520x520.png);
27            transform: rotate(25deg);
28            margin: 20px auto 0 auto;
29        }
30
31        .hamBurger {
32            display: none;
33        }
34
35        .burgerMenu {
36            display: none;
37        }
38
39        @media screen and (max-width:640px) {
40
41            .hamBurger {
42                display: block;
43                width: 70px;
44                height: 70px;
45                background-size: contain;
46                background-repeat: no-repeat;
47                background-position: center;
48                background-image: url(hamburger-520x520.png);
49                position: fixed;
50                top: 5%;
51                right: 5%;
52                z-index: 2;
53                cursor: pointer;
54            }
55
56            .burgerMenu {
57                width: 100%;
58                height: 320px;
59                background-color: rgba(10, 10, 0, 0.5);
60                position: fixed;
61                top: 0;
62                left: 50%;
63                transform: translate(-50%, 0);
64                padding: 0;
65                margin: 0;
66                display: flex;
67                justify-content: center;
68                flex-wrap: wrap;
69            }
70
71            .is-active {
72                display: none;
73            }
74
75            li {
76                width: 260px;
77                height: 54px;
78                line-height: 54px;
79                margin: 5px auto;
80                display: inline-block;
81                text-align: center;
82                font-size: 30px;
83                font-weight: bold;
84                color: white;
85                cursor: pointer;
86                background-color: rgba(255, 0, 0, 0.3);
87            }
88
89        }
90    </style>
91</head>
92
93<body>
94    <div class="header">
95        <h2 class="logo"></h2>
96
97        <button class="hamBurger"></button>
98        <ul class="burgerMenu is-active">
99            <li>コーラ</li>
100            <li>ラーメン</li>
101            <li>ポテト</li>
102            <li>ハンバーグ</li>
103            <li>かき氷</li>
104        </ul>
105    </div>
106    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
107    <script>
108        $(".hamBurger").on("click", function () {
109            $(".burgerMenu").toggleClass("is-active");
110        });
111    </script>
112</body>
113
114</html>