Bootratp4を使っていて、ヘッダメニュー(ナビゲーションバー)の項目が多過ぎる等の理由で常にハンバーガーアイコンを表示させたい、ということが起きるかと思います。
いざそうなってみると、「あれ、どうやってやるんだろうか」と戸惑ってしまったので備忘録としてメモ。
今回の場合は、
nav.navbarに対して
.navbar-expandや
.navbar-expand-XX(XXはブレークポイントの2文字)を指定しなければOK。
例えば、「
lg以上は横並び表示」という指定が付いている以下の場合は
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
<div class="container">
<a class="navbar-brand my-0 navbar_head" href="#">ブランド名</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarList" aria-controls="navbarList" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarList">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#contents1">コンテンツ1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contents2">コンテンツ2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contents3">コンテンツ3</a>
</li>
</ul>
</div>
</div>
</nav>
以下のように
.navbar-expand-lgを外せばOK。
<nav class="navbar navbar-light bg-white fixed-top">
<div class="container">
<a class="navbar-brand my-0 navbar_head" href="#">ブランド名</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarList" aria-controls="navbarList" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarList">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#contents1">コンテンツ1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contents2">コンテンツ2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contents3">コンテンツ3</a>
</li>
</ul>
</div>
</div>
</nav>
ナビゲーションバー～Bootstrap4移行ガイドだと
折り畳むことのない（常時展開する）ナビゲーションバーの場合は、ナビゲーションバーに .navbar-expand クラスを追加。 常に折り畳むナビゲーションバーの場合には、.navbar-expand クラスを追加しないこと。
ナビゲーションバー～Bootstrap4移行ガイド
さらっと一文で触れていて例がないので、今まで見落としていました……。
参考
アルム＝バンド