ハンバーガーボタンをクリックすると全画面オーバーレイが発生するサイトを作ったのだが、オーバーレイ発生後のハンバーガーボタンが押しにくい

Question

HTML、CSS、jQueryを使って、
ハンバーガーボタンをクリックすると全画面オーバーレイが発生するサイトを作りました。
同時にハンバーガーボタンをクリックすると三本の横棒が×に変化する仕様にしています。

ハンバーガーボタンとオーバーレイのコードは以下の通りです。

<header class="header">
    <h1 class="site">ホームページタイトル</h1>
    <nav class="nav">
        <ul>
            <li><a href="#">メニュー1</a></li>
            <li><a href="#">メニュー2</a></li>
            <li><a href="#">メニュー3</a></li>
        </ul>
    </nav>
    <button type="button" class="nav-btn"></button>
</header>

/* ================================================
   リセットCSS
===================================================*/
body, h1, h2, h3, h4, h5, h6, p, ul, figure {
    margin: 0;
    padding: 0;
}

/* ================================================
   ボタンクリック前のオーバーレイの設定
===================================================*/
html, body {
  overflow: hidden;
}

.header {
  position: relative;
}

/* クリック前の.navの位置・幅・高さ */
.nav {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: left 0.5s;
}

/* ================================================
   ボタンクリック後のオーバーレイの設定
===================================================*/
html.open, .open body {
  height: 100%;
  overflow: hidden;
}

.open .nav {
  left: 0; /* クリック後の.navの位置 */
}

/* ================================================
   ボタンクリック前のハンバーガーボタンの設定
===================================================*/
.nav-btn {
  box-sizing: content-box;
  padding: 0;
  outline: none;
  border: none;
  background: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  color: red;
}

/* ハンバーガーボタンの棒の基本的な設定 */
.nav-btn::before, .nav-btn::after {
    content: '';
    display: block;
    background-color: currentColor;
    height: 4px;
    transition: 0.3s ease-in-out;
    transform: translateY(21px); /* 下の棒の位置設定 */
}

.nav-btn::before {
    transform: translateY(-21px); /* 上の棒の位置設定 */
    box-shadow: 0 23px currentColor; /* 真ん中の棒の位置設定 */
}

/* ================================================
   ボタンクリック後のハンバーガーボタンの設定
===================================================*/
.open .nav-btn {
  z-index: 1000;
}

.open .nav-btn::before {
    transform: translateY(2px) rotate(45deg); /* 上の棒の処理 */
    box-shadow: none; /* 真ん中の棒の処理 */
}

.open .nav-btn::after {
    transform: translateY(-2px) rotate(-45deg); /* 下の棒の処理 */
}

$(function () {
    $('.nav-btn').on('click', function () {
        $('html').toggleClass('open');
    });
})

このコードで、ハンバーガーボタンもオーバーレイもきれいに動いてくれるのですが、
唯一の不満が、オーバーレイ発生後のハンバーガーボタンの押しにくさです。

オーバーレイが発生する前のハンバーガーボタンは、
三本の棒だけでなく、三本の棒の間をクリックしてもきれいに×に変化するし、オーバーレイも発生します。

けれどオーバーレイ発生後、今度は×の形となったハンバーガーボタンを押そうとしても、
今度は×の棒の線上を押さないと変化しません。

予定では、×の棒の間をクリックしても×の形は横棒三本に戻り、
オーバーレイも解除されるはずでした。

ためしにオーバーレイの動きを止め、
ハンバーガーボタン単独で動かす場合は、
×の棒の間を押しても、×はきちんと横棒三本に戻ります。

つまりオーバーレイと一緒に使ったときだけ
きちんと作動しないのです
なぜこうなったのかよくわかりません。

×の棒の間を押しても変化する仕組みにしたいのですが、
どのようにすればいいのでしょうか？

Answer 1

以下を追加してみてください。

.open .nav-btn {
    position: relative;
}

Comments

[cheshire-cat]

ありがとうございます。
z-indexが効いていないとは思いませんでした。

Answer 2

.nav-btn の z-index が効いていないようです。
下記のようにすると解決します。

.open .nav-btn {
  position: relative; /* 追加 */
  z-index: 1000;
}

CSSでz-indexが効かない時の4つの原因とその対応方法 | コリス

Comments

[cheshire-cat]

まさかz-indexが効いていないとは思いませんでした。
解決しました。
ありがとうございます。