バーガーメニューアイコンを変更・調整する方法 : Bootstrap 4

Bootstrap4のNavbar(ナビゲーションメニュー)は便利ですが、ハンバーガーメニューが少しカッコ悪いので調整して使えたら良いな。と思ったことはありません。

今回の記事では簡単にBootstrap4のハンバーガーメニューを調整し、おしゃれでカッコよくする方法を紹介します。

Bootstrap のハンバーガーメニューの枠線を消す方法

まずはハンバーガーメニューの枠線を消します。Bootstrap のデフォルトのハンバーガーメニュー（下記コード）に対して、スタイルを適用します。

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

スタイル追加

.navbar-light .navbar-toggler {
    border-color: rgba(0,0,0,0);
}

少しオシャレになりましたね。

ハンバーガーメニューを調整する方法

下記のコードでデフォルトのハンバーガーメニュー(SVG)を上書きします。

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30'
  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(51, 51, 51, 1)'
  stroke-width='3' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

stroke='rgba(51, 51, 51, 1) でカラー指定

stroke-width='3' で線の太さを調整

最終調整

さらに背景色や、ブランド名などを調整して完成です。

デフォルトの状態よりはオシャレになったのではないでしょうか？ これ以上デザインを凝りたい場合は、ネットからハンバーガーメニューのアイコンを探してくるか、デザイナーに作成を依頼する必要がありそうですね。

まずは、本記事で紹介した手順でハンバーガーメニューを変更してみてください。

当サイトでは他にも Bootstrap の Navbar に関する記事を公開しています。お困りの際は、下記の記事をぜひ参考にしてください。

ナビゲーションメニュー（ Navbar ）の中央寄せ、右寄せなどの使い方 : Bootstrap 4

Navbar をフルスクリーンにする方法 : Bootstrap 4

Navbar の高さを調整する方法 : Bootstrap 4

Navbar クリック時にメニューを閉じる方法 : Bootstrap 4