【Bootstrap】navbarの文字色を変えた時にちょっと詰まったこと

はじめに

多分調べればほかにいい記事は出てきます。
自分がちょっと詰まったところなので、メモとして残しておきます。

変更方法

文字色の場合はnavbar-lightかnavbar-dark、
背景色の場合はbg-lightかbg-barkを削除して、別途スタイルシートなどに色を指定する。

.html

# 変更前
<nav class="navbar navbar-light bg-light">
              --省略--
  <ul>
    <li>...</li>
  </ul>
</nav>

# 変更後(文字色背景色ともに変更する場合)
<nav class="navbar">
              --省略--
  <ul>
    <li>...</li>
  </ul>  
</nav>

変更したら好きな色を指定しましょう。

.css

.navbar {
  background-color: 'カラーコード';
}

li {
  color: 'カラーコード';
}

ハンバーガーメニューを搭載している場合

ハンバーガーメニューがある状態で、上記のように色の変更をするとハンバーガーメニューが見えなくなってしまいます。
そのためハンバーガーメニューの色も変更する必要があります。
変更点は枠と三本線の色ですが、必要に応じて背景色も変えられます。

.css

.navbar-toggler {
  # 枠の色
  border-color: 'カラーコード';

  # 背景色
  background-color: 'カラーコード';
}

.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='カラーコード' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

三本線はSVGを利用しているようです。
stroke=の部分を変更して色を変えます。

参考

Bootstrap4のハンバーガーメニューの色を変える方法
Bootstrap4においてハンバーガーメニューの色変更について