tkmiumのブログ

tkmium-note

プログラミング中に気づいたことや日々の記録を書いていきます。情報関係基礎の解説記事等も作成します。

【bootstrap4】スマホ表示でハンバーガーメニューがコンテンツの下に隠れてしまう時

bootstrap4を使ってwebページを作っていく中で、スマホ表示の時にハンバーガーメニューがコンテンツの下に隠れてしまうという問題が発生しました。

状況

以下のように、メニューがコンテンツの下に隠れてしまっています。

f:id:tkmium:20181221165012p:plain

 

コード(html)

      <!-- header -->
      <header>
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" href="index.html"><i class="fas fa-swatchbook"></i>test</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">about</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="news.html">ニュース</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">お問い合わせ</a>
              </li>
            </ul>
          </div>
        </nav>
      </header> <!-- end header -->

 

解決法

cssに以下のコードを追加します。

    .navbar{
    z-index: 2;
    }

z-indexは重なりの順序を指定するものです。値が大きいほど上に表示されます。

www.htmq.com

 

追加すると、こうなりました。

f:id:tkmium:20181221165529p:plain

上側に表示されました。

 

透明で見づらいので、style="background-color: white;"を追加して

f:id:tkmium:20181221165623p:plain

完成です!