Bootstrap4においてハンバーガーメニューの色変更について

投稿者: Anonymous

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

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

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

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

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

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

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

解決

まず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");
}
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *