最終更新日: 2021年1月7日
Bootstrapでnavbarを2段にする方法を解説！
この記事では、Bootstrapでnavbarを2段にする方法を解説しています。Bootstrapのnavbarはデフォルトですべて横並び一列になるのですが、ある手順を踏むだけで簡単に2段にすることができます！サンプルコードも参考にしてみてください。
Bootstrapでnavbarを2段にしたい
Bootstrapでnavbarを作成すると、通常はメニューがすべて横並び一列になりますが、二段のメニューを作成したい時はどうすればよいのでしょうか？
今回は、このナビゲーションバーの中身を二段にする方法を解説します！
Bootstrapでnavbarを2段にする方法
従来は一つのul要素にすべての項目を記述していたと思いますが、ul要素を２つ作成し、それぞれの段の内容を分けて書いていきます。
そしてその2つのul要素はdiv要素で囲んでおきます。
ul要素を2つ作成したコード
<nav class="navbar navbar-expand navbar-dark bg-info fixed-top">
<a href="#" class="navbar-brand">Qumeruカフェ</a>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item text-white ml-2">HP訪問ありがとうございます。</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">コース </a></li>
<li class="nav-item"><a class="nav-link" href="#">当店について</a></li>
<li class="nav-item"><a class="nav-link" href="#">メニュー</a></li>
<li class="nav-item"><a class="nav-link" href="#">アクセス</a></li>
</ul>
</div>
</nav>１段目のli要素にのみ.text-whiteや.ml-2クラスを適用している理由は、今回はこの部分をリンクにしていないため、２段目のリンクとスタイルが揃わなくなってしまうためです。２段目とスタイルを揃えるために、文字色や余白を手動で設定しています。
一段のときのコードも載せておくので見比べてみてください。
1段のnavbarのコード
<nav class="navbar navbar-expand navbar-dark bg-info">
<a href="#" class="navbar-brand">Qumeruカフェ</a>
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">コース </a></li>
<li class="nav-item"><a class="nav-link" href="#">当店について</a></li>
<li class="nav-item"><a class="nav-link" href="#">メニュー</a></li>
<li class="nav-item"><a class="nav-link" href="#">アクセス</a></li>
</ul>
</nav>このようにすると、2段のナビゲーションバーを作成することができます。
サンプルコードは以下の通りです。
(レスポンシブ対応していないため、もしレイアウトが崩れている場合にはプレビュー画面を別タブで開き見てください)
もちろん、2段ともリンクにすることもできます！
まとめ
いかがでしたか？ul要素を２つ用意するだけでnavbarを2段にすることができます。是非活用してみてください！
