arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[Bootstrap]Justified navのハンバーガーボタンを非表示にする

ささっとサイトを作りたい時に、自分で作ったスニペットかBootstrapなどのフレームワークが現時点での私の選択肢になります。先日Bootstrap4のJustified navテンプレートを使ってデモ画面を作成した時にCSSを少しいじくりました。簡単なことなのですが、備忘録として残しておきます。

Justified navのテンプレート

Bootstrap4の公式サイトには[Example]として数種類のテンプレートが紹介されています。
Bootstrap4をダウンロードして、docs > examples フォルダを開いても確認できます。

Bootstrap4テンプレート画面

この中の“Justified nav(justified-nav)”という、ナビゲーションメニューが均等割りのテンプレート、この画面では一見すると何も問題ないように見えるのですが…

JustifiedNavデモ画面

なんと、PCの画面サイズでもハンバーガーメニューなのです(びっくりするほどかというと微妙)。
個人的にはわざわざハンバーガーメニューにする意図が感じられなかったので、ざっと調べてみたのですが…わかりませんでした(^^;)
原因究明ができないのは気持ち悪いのですが、暫定的にCSSでなんとかしようという運びになりました。

CSSで調整

Bootstrap4をダウンロードして、docs > examples と進んで 「justified-nav」 フォルダを選択します。
ここからサイトを作る方はdistフォルダやassetsフォルダと共にコピーして使った方がいいかもしれません。

JustifiedNavフォルダ

justified-nav.css に以下を追加します。

ナビゲーションのメニュー部分や<ul>に.navbar-toggleable-md.justify-content-md-betweenなど-mdが入っているので、「このナビゲーションは991px以下でレイアウトが切り替わる」ということになります。
ですので、CSSのメディアクエリを「992pxまでは以下の通りにする」と書けばいいわけです。
詳細はグリッド・システム|Bootstrap3日本語リファレンスを参考にしてください。

今回もデモ画面を作成しましたので、開いてウィンドウを狭くして確認してみてくださいね。


それほど難しいことではないのですが、Bootstrap4の仕組みを知って、素早く思い通りのサイトを作りたいですね。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP