ハンバーガーメニューにおいて、toggleが反応しない

前提・実現したいこと

ハンバーガーメニュー実装

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

ハンバーガーメニューのtoggleが反応しない（addはされるが、removeがされない）

該当のソースコード

html
1<body>
2  <header class="header">
3    <div class="header__inner">
4      <div class="header__unit">
5
6        <a href="" class="header__logo">
7          <img src="../img/header-logo.svg" alt="headerのlogo画像">
8        </a>
9        <!-- <div class="header__subNav"> -->
10          <nav class="subNav" id="Header-Nav">
11            <a href="#" class="subNav__link">Projects</a>
12            <a href="#" class="subNav__link">Member</a>
13            <a href="#" class="subNav__link">About</a>
14          </nav>
15        <!-- </div> -->
16      </div>
17      <div class="header__btn">
18        <a href="#" class="btn--black">contact</a>
19      </div>
20      <div id="Hamburger" class="header__hamburger">
21        <div class="p"></div>
22        <div class="p"></div>
23        <div class="p"></div>
24      </div>
25    </div>
26
27  </header>
28  <script type="text/javascript" src="./header.js"></script>
29</body>

scss
1.header {
2  a {
3    text-decoration: none;
4  }
5
6  &__inner {
7    align-items: flex-end;
8    display: flex;
9    justify-content: space-between;
10    padding: 44px $space-lg 0 54px;
11  }
12
13  &__unit {
14    display: flex;
15    align-items: center;
16  }
17
18  &__logo {
19    width: 197px;
20    height: 59px;
21  }
22
23 
24
25  .subNav {
26    display: flex;
27    margin-top: 20px;
28
29    &__link {
30      display: block;
31      font-size: 1.8rem;
32      height: 2.3rem;
33      margin-left: 48px;
34    }
35  }
36
37  &__btn {
38    margin-bottom: -4px;
39  }
40
41  .btn--black {
42    width: 156px;
43    border-radius: 50px;
44  }
45
46
47  &__hamburger {
48    display: none;
49    width: 32px;
50    height: auto;
51    cursor: pointer;
52  }
53
54  @media screen and (max-width: 900px) {
55    &__hamburger {
56      display: block;
57    }
58
59    .subNav {
60      display: none;
61      // display: none;
62      position: absolute;
63      flex-direction: column;
64      top: 60px;
65      right: 0;
66      width: 100%;
67      height: auto;
68
69    }
70
71    .active {
72      display: flex;
73      // display: block;
74    }
75
76    &__btn {
77      display: none;
78    }
79
80    .subNav__link {
81      text-align: center;
82      margin: 20px 0;
83      width: 100%;
84    }
85  }
86}
87
88
89
90.p {
91  background-color: black;
92  border-radius: 20px;
93  padding: 2px 5px;
94  margin: 4px 0;
95}
96
97.p::before {
98  /* 上の線の位置 */
99  transform: translateY(-16px);
100}
101
102
103.p::after {
104  /* 下の線の位置 */
105  transform: translateY(16px);
106}
107
108.p.active {
109  /* 真ん中の線を透明に */
110  background-color: transparent;
111}
112
113.p.active::before,
114.p.active::after {
115  content: "";
116  transition: .2s;
117}
118
119.p.active::before {
120  /* 上の線を傾ける */
121  transform: rotate(45deg);
122}
123
124.p.active::after {
125  /* 上の線を傾ける */
126  transform: rotate(-45deg);
127}

js
1const hamburger = document.getElementById('Hamburger');
2const header_nav = document.getElementById('Header-Nav');
3hamburger.addEventListener('click', () => {
4header_nav.classList.toggle('active');
5});

試したこと

addとremoveの条件分岐で書いたがうまく行かず

補足情報（FW/ツールのバージョンなど）

mac/chrome

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

回答1件

ハンバーガーメニューが隠れてしまってクリックできないのが原因と思われます。
以下のようにしてみてください。

css
1.header__hamburger {
2    display: block;
3    /* 以下を追加 */
4    position: relative;
5    z-index: 2;  /* 場合によってはもっと大きい数字で */
6}

投稿2020/12/23 12:35

編集2020/12/23 12:38

cerfweb

総合スコア1907

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／