Bootstrap4のnavbarカスタマイズ方法

レスポンシブで使いやすいnavbarですがカスタマイズの方法忘れやすいのでメモ

Bootstrap4の基本形navbar

項目はいろいろありますが最低限なら下記でいけるでしょう

• タブレットサイズでメニュー展開
• メニューを右寄せ
• タイトルを文字
• 色をlight

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">タイトル</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">link1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">link2</a>
      </li>
    </ul>
  </div>
</nav>

よく使うカスタマイズを見てみましょう

navタグをみてみる(1行目)

<nav class="navbar navbar-expand-md navbar-light bg-light">

メニューを展開するポイントを設定する

• navbar-expand-○○
  • sm:モバイル md:タブレット lg:デスクトップ など

ナビゲーションの色変更

• navbar-○○
  • primary, light など

ナビゲーションの背景色変更

• bg-○○
  • primary, light など

タイトルに画像を使用

aタグ内にimgタグをいれる

<a class="navbar-brand" href="#"><img src="" alt=""></a>

バーガーアイコンの枠を消す

.navbar-toggler{
  border: none;
}
.navbar-toggler:active{
  outline: none;
}
button:focus{
  outline: none;
}

バーガーアイコンの色と先の太さを変える

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

CSSで変更

• stroke-width='2' の数値を変えて太さ変更
• stroke='rgba(0, 0, 0, 0.5)' のrgbaの値変更で色変

変更できますが個人的にはFontawesomeに入れ替えてしまったほうが好みですね
すこしややこしいですし

バーガーアイコンを変更

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
  <i class="fab fa-apple"></i>
</button>

font-sizeなどで変更できるのでオススメです

メニューとタイトルの位置を逆にする

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">タイトル</a>

buttonタグとaタグの場所を入れ替えるだけです

メニューの並びを変更する

    <div class="collapse navbar-collapse justify-content-start" id="navbar-content">

• 左寄せ : justify-content-start
• 中央寄せ : justify-content-center
• 右寄せ : justify-content-end

navbarをスクロールしても上部に貼り付ける

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">

fixed-topを追加する

まとめ

navbarのカスタマイズでどれだけつまずいたことか！
レスポンシブ対応は難しいから勉強しはじめの頃にnavbarの存在知って「すごい！」と思ったものの、カスタマイズがよくわからずたくさんの時間をほうりだしました(笑)
助けになればとおもいます