Bootstrapのnavbarを固定する方法を解説!

この記事では、Bootstrapを使って作ったナビゲーションバー(navbar)を画面上部や下部に固定する方法を解説します。Bootstrapを使うとクラスを指定するだけでnavbarを固定できます。サンプルコードも用意しているので参考にしてください。

コンテンツ [表示]

  1. 1Bootstrapのnavbar(ナビゲーションバー)を固定したい
  2. 2Bootstrapのnavbarを固定する方法

Bootstrapのnavbar(ナビゲーションバー)を固定したい

Bootstrapを使ってナビゲーションバーを作ったとき、スクロールしても画面上部または下部に固定したいことがありますよね。

今回はBootstrapを使ってCSSファイルを作成することなくナビゲーションバーを固定する方法を紹介します。

Photo byvanmarciano

Bootstrapのnavbarを固定する方法

nav要素に.fixed-topクラスを適用すると、ナビゲーションバーが画面上部に固定されて、スクロールしても常に表示されるようになります。

ナビゲーションバーにfixed-topを適用したコード

<nav class="navbar navbar-expand navbar-dark bg-info fixed-top">
  <!-- 省略 -->
</nav>

しかし、これだけですとナビゲーションバーの下にあった内容部分がナビゲーションバーに隠されてしまいます。

これを防ぐために、padding-topを使ってbody部分の上部に余白(padding)を設定します。

body要素にpaddingを設定する

<body style="padding-top: 5rem">
  〜省略〜
</body>

このようにstyle属性で指定しても良いですし、CSSで指定しても良いです。

body要素にpaddingを指定する

body { 
  padding-top: 5rem; 
}

サンプルコードは以下のようになります。スクロールしてナビゲーションバーが固定されていることを確認してみましょう。

画面サイズが小さいとレイアウトが崩れる場合があるので、プレビュー下部のボタンをクリックしてサイズを大きくして見てください。

.fixed-topクラスの代わりに.fixed-bottomクラスを使用すると、ナビゲーションバーを画面下部に固定できます。

この場合も内容がナビゲーションバーに隠れることを防ぐためにpadding-bottomを使ってbody要素の下に余白を作成することが必要です。

GeekHive採用サイト

関連記事