Skip to content

Latest commit

 

History

History
69 lines (58 loc) · 2.36 KB

763ccaa751ef0382c2bb.md

File metadata and controls

69 lines (58 loc) · 2.36 KB
title tags author slide
【Bootstrap】navbarの文字色を変えた時にちょっと詰まったこと
bootstrap4
sayuprc
false

はじめに

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

変更方法

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

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

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

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

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

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

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

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

.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においてハンバーガーメニューの色変更について