1

Bootstrap4のハンバーガーメニューについてなんですが

<span class="navbar-toggler-icon"></span>

このクラスに対してデフォルトの色から白色に変更をしたいため

span.navbar-toggler-icon {
  color:#fff;
}

とかいているんですが色が白色になりません。

この色を変更するにはどうしたら適用されるでしょうか?

こちらdropboxにアップロードした問題点のイメージ画像になります。
問題のハンバーガーメニュー

1

1 件の回答 1

1

まず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");
}
9
  • 回答されていた通りにやってみたところ色は白色に変わりませんでした。
    – t.s
    2018年12月18日 2:26
  • この部分以外のCSSは変更が反映されますか?
    – PicoSushi
    2018年12月18日 2:28
  • @PicoSushi 背景の色やボーダーなどは変更が反映されるんですがハンバーガーのみ変更が適用されません。
    – t.s
    2018年12月18日 2:32
  • @t.s span以外の部分は何がありますか?
    – kabichan
    2018年12月18日 4:21
  • 1
    もし解決したようでしたら、回答を承認して頂けますとありがたいです。そうすることにより、この問題は解決済みになります。
    – kabichan
    2018年12月19日 4:48

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。