Bootsrap4で常にハンバーガーを表示する

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移行ガイド

さらっと一文で触れていて例がないので、今まで見落としていました……。

参考

• ナビゲーションバー～Bootstrap4移行ガイド
• 【Bootstrap4】navbarでレスポンシブデザインをしよう｜ゆうログ