BootstrapでDrawer使うとき

ボタン押すと横からメニュー出てくるやつです。Drawer
ですがこの「ボタン」がBootstrapで使う場合は微妙な場合があります。

Navbarを固定で使う場合(navbar-fixed-topとか)はz-indexで最上段にくるため、Drawerのボタンが隠れてしまいます。
ついでにスマホで表示した場合はNavbarのトグルボタンと被ってかっこ悪い。

こんな感じ

PCサイズではDrawerのボタン。
スマホではNavbarのボタンからDrawerを開くという感じにちょっとだけ修正するCSSを置いておきます。
※細かい微調整は各自でどうぞ～

まずCSSで以下を追加します。

@media (max-width: 768px) {
  .drawer-hamburger {
    display: none;
  }
}
.drawer-nav {
  z-index: 11101;
}
.drawer-overlay {
  z-index: 11100;
}
.drawer-hamburger {
  z-index: 11104;
}
.drawer-navbar {
  z-index: 11102;
}
.drawer-navbar-header {
  z-index: 11102;
}

そしてclassでnavbar-toggle collapsedを指定してるところにdrawer-toggleを追加してこんな感じにする。

class="navbar-toggle collapsed drawer-toggle"

これで完成。
PCサイズの時はDrawerのボタン。
スマホサイズの時はBootstrapのボタンからDrawerをOpen。

DrawerのボタンとBootstrapのスマホサイズ時のボタンが少々違うのでそのへんの微調整は適当にやってください。

CSS Bootstrap Drawer