Twitter Bootstrap の Navbar はレスポンシブな感じになっていて、ブラウザの横幅に応じて表示状態が変わります。デフォルトでは
- 横幅が768px以上 → ナビのメニューをふつうに表示
- 横幅が768px未満 →
≡
こんな感じのボタンだけが表示され、クリックするとメニューがにょろっと出現 (スマホっぽい)
Bootstrap のサイトの一番上のメニューがそれですね、ブラウザの横幅を変えてみると勝手に表示が切り替わります、便利ですね
で、
これをブラウザの横幅にかかわらず、常に ≡
ボタンだけが出ている状態にして、メニューをにょろっと表示させたい場合はどうするか
Bootstrap のサイトでは、less を使って変数 @grid-float-breakpoint
の値を変更してカスタマイズしてどうのこうの、と書かれているっぽい
めんどくさい
ということでとりあえず、以下のような css を追記したら動きました
これでPCのブラウザでも、Navbar がスマホっぽいにょろっとしたメニュー表示になります。
@media(min-width:768px) {
.navbar-collapse.collapse {
display: none !important;
}
}