Bootstrap 4 の Navbar（ナビゲーションメニュー）は便利ですが、「ハンバーガーメニューが少しカッコ悪いので調整して使えたら良いな」と思ったことはありませんか。
本記事では、簡単に Bootstrap 4 のハンバーガーメニューを調整し、オシャレでカッコよくする方法を紹介します。
「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供
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
