Bootstrap3 ヘッダー部のモバイル用の開閉ナビゲーション

Bootstrap3 ヘッダー上部に設置するモバイル用開閉ナビゲーションの設置方法の覚書。

上部ヘッダーナビゲーションの雛形

とりあえず上記のコードをヘッダー部に流し込む。

必ず「container」+「row」の間にはさむこと

ナビゲーションカスタマイズ用の CSS

この CSS で編集を行うことによってモバイル開閉メニューのレイアウトを変更することができる。

メニューが多い場合はドロップダウンを使う

ドロップダウン雛形

この例の場合ドロップダウン最後のリストには「.spnavlast-child」というclassを自作して
次のコンテンツまでのマージンボトムを調整している。

ドロップダウンのタイトルの「caret(キャレット)」カラーを調整する。
bootstrapの場合はborder属性で作成されているので以下のCSSを追記

!important は必須。