固定されたナビ(ヘッドとサイド)

投稿日：2016年1月11日更新日：2020年5月17日

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。

Contents

1 ヘッダーを固定したい場合
2 サイドバーを固定したい場合
3 参考リンク

ヘッダーを固定したい場合

<nav class="navbar navbar-inverse  navbar-fixed-top">
	・・・・・・
</nav>

・・・・・・

</nav>

classにnav-fixed-topを入れてあげればＯＫです。

サイドバーを固定したい場合

<div class="row col-md-4">
    <div class="sidebar-nav affix" role="complementary">
        <ul class="nav">
          　　・・・・・・・
        </ul>
    </div>
</div>

　　・・・・・・・

</ul>

</div>

div classにaffixを入れ、bootstrap.cssに下記のCSSを追加します。

.bs-sidebar.affix {
  position: static;
}


@media (min-width: 992px) {
.bs-sidebar .nav > .active > ul {
  display: block;
}
/* Widen the fixed sidebar */
.bs-sidebar.affix,
.bs-sidebar.affix-bottom {
  width: 213px;
}
.bs-sidebar.affix {
  position: fixed; /* Undo the static from mobile first approach */
  top: 80px;
}
.bs-sidebar.affix-bottom {
  position: absolute; /* Undo the static from mobile first approach */
}
.bs-sidebar.affix-bottom .bs-sidenav,
.bs-sidebar.affix .bs-sidenav {
  margin-top: 0;
  margin-bottom: 0;
}

.bs-sidebar.affix {

position: static;

}

@media (min-width: 992px) {

.bs-sidebar .nav > .active > ul {

display: block;

}

/* Widen the fixed sidebar */

.bs-sidebar.affix,

.bs-sidebar.affix-bottom {

width: 213px;

}

.bs-sidebar.affix {

position: fixed; /* Undo the static from mobile first approach */

top: 80px;

}

.bs-sidebar.affix-bottom {

position: absolute; /* Undo the static from mobile first approach */

}

.bs-sidebar.affix-bottom .bs-sidenav,

.bs-sidebar.affix .bs-sidenav {

margin-top: 0;

margin-bottom: 0;

}

参考リンク

Navbarとサイドバーに置いたNavを固定させる

bootstrapで基本的な固定サイドメニューを作成する

Bootstrap3で固定サイドバー(affix & scrollspy)を使用する