ウェブ開発入門完全攻略コース bootstrap

bootstrapのnavbarの解説で分からない所があったので、メモを残しておきます。

navbarの色を変更する方法

---

文字色を変更する場合は、navbar-lightかnavbar-dark
背景色を変更する場合は、bg-lightかbg-dark`
そして背景色の変更はcssのbackground-colorで色指定できるという解説がありました。
文字色の色指定はclass名とliをcssで指定して、colorで変更できました。

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

#文字色と背景色を変更する
<nav class="navbar">
省略
  <ul>
    <li>...</li>
  <ul>
</nav>

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

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

.nav-link {
  color: カラーコード;
}

これで文字色も変更できました。結局わからずに進んでしまったのですが、liで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");
}

stroke=の部分を変更すると色が変わるみたいです。
上記の通りやっても変更できませんでしたが、

nav .navbar-toggler {
  border-color: カラーコード;
  background-color: カラーコード;
}

.navbar-toggler .navbar-toggler-icon {
  background-image : url("...");
}

これで変えることができました。 cssの記述の基礎が理解できていないかもしれません。

参考にさせていただいた記事

---

Bootstrap4のハンバーガーメニューの色を変える方法