Bootstrapでページ内リンク先がナビゲーションバーに隠れる

タグ一覧ページで、特定のタグをクリックしてページ内リンク先に移動すると、先頭部分がナビゲーションバーに隠れてしまっていた。

検索すると下記記事が見つかった。

難しそうなのでナビゲーションバーを上部に固定（navbar-fixed-top）しているのをやめようかと思ったが、リンクされていたGithub上のissueを見るとCSSを使った対処法が紹介されていた。

その通りstyle.cssに追記すると、リンク先の先頭部分は表示されるようになったが、使っているナビゲーションバーの高さが狭いせいか、一つ前のタグの下の部分が少し表示されている。

navbarのmin-heightに合わせて、-75px、75pxの箇所を-50px、50pxにしたら、ちょうど良い具合になった。

*[id]:before {
  display: block;
  content: " ";
  margin-top: -50px;
  height: 50px;
  visibility: hidden;
}

ーー
（追記）
その後navbar-fixed-topはやめました。

表示

Comments