Bootstrap4のハンバーガーメニューについてなんですが
<span class="navbar-toggler-icon"></span>
このクラスに対してデフォルトの色から白色に変更をしたいため
span.navbar-toggler-icon {
color:#fff;
}
とかいているんですが色が白色になりません。
この色を変更するにはどうしたら適用されるでしょうか?
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するBootstrap4のハンバーガーメニューについてなんですが
<span class="navbar-toggler-icon"></span>
このクラスに対してデフォルトの色から白色に変更をしたいため
span.navbar-toggler-icon {
color:#fff;
}
とかいているんですが色が白色になりません。
この色を変更するにはどうしたら適用されるでしょうか?
まずHTMLのコード内で、<span>..</span>
をラップしているボタンにカスタム用のクラスcustom-hamburger
を追加します。
<nav class="navbar navbar-dark bg-dark custom-hamburger">
<span class="navbar-toggler-icon"></span>
</nav>
CSSでcustom-hamburger
内のnavbar-toggler-icon
に対し、カスタム用の色を指定します。
Bootstrap4ではSVGを使っているので以下のようにbackground-image
の設定を使います。stroke=white
というようにwhite
に設定しているため、白いハンバーガーになります。
.custom-hamburger .navbar-toggler-icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}