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

2019年2月11日 00:00

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' で線の太さを調整

最終調整

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

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