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

公開日:2019-08-10
最終更新:2019-08-10
※この記事は外部サイト(https://labor.ewigleere.net/2019/08/10/boo...)からのクロス投稿です

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

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

参考

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
アルム=バンドのQrunch

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする