[Bootstrap]Justified navのハンバーガーボタンを非表示にする
ささっとサイトを作りたい時に、自分で作ったスニペットかBootstrapなどのフレームワークが現時点での私の選択肢になります。先日Bootstrap4のJustified navテンプレートを使ってデモ画面を作成した時にCSSを少しいじくりました。簡単なことなのですが、備忘録として残しておきます。
Justified navのテンプレート
Bootstrap4の公式サイトには[Example]として数種類のテンプレートが紹介されています。
Bootstrap4をダウンロードして、docs > examples フォルダを開いても確認できます。
この中の“Justified nav（justified-nav）”という、ナビゲーションメニューが均等割りのテンプレート、この画面では一見すると何も問題ないように見えるのですが…
なんと、PCの画面サイズでもハンバーガーメニューなのです（びっくりするほどかというと微妙）。
個人的にはわざわざハンバーガーメニューにする意図が感じられなかったので、ざっと調べてみたのですが…わかりませんでした(^^;)
原因究明ができないのは気持ち悪いのですが、暫定的にCSSでなんとかしようという運びになりました。
CSSで調整
Bootstrap4をダウンロードして、docs > examples と進んで 「justified-nav」 フォルダを選択します。
ここからサイトを作る方はdistフォルダやassetsフォルダと共にコピーして使った方がいいかもしれません。
justified-nav.css に以下を追加します。
1 2 3 4 5 6 7 8 | @media screen and (min-width: 992px) { .navbar-toggler { display: none; } .collapse { display: block; } } |
ナビゲーションのメニュー部分や<ul>に.navbar-toggleable-mdや.justify-content-md-betweenなど-mdが入っているので、「このナビゲーションは991px以下でレイアウトが切り替わる」ということになります。
ですので、CSSのメディアクエリを「992pxまでは以下の通りにする」と書けばいいわけです。
詳細はグリッド・システム|Bootstrap3日本語リファレンスを参考にしてください。
今回もデモ画面を作成しましたので、開いてウィンドウを狭くして確認してみてくださいね。
それほど難しいことではないのですが、Bootstrap4の仕組みを知って、素早く思い通りのサイトを作りたいですね。ねこま（@necomacustom）でした。