モノラルログ

マツオ ( @matsuoshi / monaural.net ) のざっくりしたブログです

Twitter Bootstrap の Navbar の表示を、常にスマホっぽい動きのある感じにしたい

Twitter Bootstrap の Navbar はレスポンシブな感じになっていて、ブラウザの横幅に応じて表示状態が変わります。デフォルトでは

  • 横幅が768px以上 → ナビのメニューをふつうに表示
  • 横幅が768px未満 → こんな感じのボタンだけが表示され、クリックするとメニューがにょろっと出現 (スマホっぽい)

Bootstrap のサイトの一番上のメニューがそれですね、ブラウザの横幅を変えてみると勝手に表示が切り替わります、便利ですね

で、
これをブラウザの横幅にかかわらず、常に ボタンだけが出ている状態にして、メニューをにょろっと表示させたい場合はどうするか

Bootstrap のサイトでは、less を使って変数 @grid-float-breakpoint の値を変更してカスタマイズしてどうのこうの、と書かれているっぽい

めんどくさい

ということでとりあえず、以下のような css を追記したら動きました
これでPCのブラウザでも、Navbar がスマホっぽいにょろっとしたメニュー表示になります。

@media(min-width:768px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
}