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

今回の記事では簡単にBootstrap4のハンバーガーメニューの調整を行います。
完成版のサンプル
枠線を消す
まずはハンバーガーメニューの枠線を消します。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' で線の太さを調整

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

少しはオシャレになりましたでしょうか? これ以上デザインを凝りたい場合は、ネットからハンバーガーメニューを拾ってくるか、デザイナーに依頼する必要がありそうですね。