chlonolog

web, digital gadgets, and more.

navbar固定の際にリンク位置がずれるのを調整する

Bootstrapを使用した際、.navbar-fixed-topでメニューを上部へ固定すると、<a href="#foobar">といったページ内リンクを使用した際に画面がメニューへずれ込んでしまいます。
前から気になっていたのですが、簡単に直せると分かったので手を入れました。


具体的には?

.navbar-fixed-topを使う場合は、下のコンテンツがメニューに食い込まないよう、bodypadding-topを指定してやる必要があります。これは大前提ですね。

body {
  // navbar-fixed-top 対応
  padding-top: 80px;
}

その後、ページ内リンクの対象となっているaタグに以下のような設定を行いました。

.blog-main {
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
      padding-top: 70px;
      margin-top: -70px;

    & > a {
      display: block;
    }
  }
}

.blog-mainはメインコンテンツ表示部分です。サイドバーなどには適用したくないので、条件を狭めています。
たったこれだけで、期待した位置へジャンプできるようになりました。


参考

参考にさせていただいたのはこちら。

下のサイトではaタグにmarginとpaddingを設定していますが、そうするとリンク部分が上に大きく広がってクリックに支障をきたしたので、私は上位のh2〜h6タグに設定しています。

コメント

© 2018 chlono