【Twitter Bootstrap】responsiveでnavbar-top-fixedに設定したのに、画面を小さくした時ナビバーがfixedされない問題を解決

したいこと

  • スマホで見たときにも上部にナビバーがくっついていてほしい。

問題

  • bootstrap-responsive.cssも読み込みnavbar-fixed-topとした。
  • しかし小さい画面でアクセスしてスクロールすると上部に固定されていないことがわかる。

解決方法

bootstrap-responsiveを見るとnavbar-top-fixedクラスがposition: static;になっていたり, bodyがpadding-top: 0;になっていたりした。

  • bootstrap-responsive.cssの内容を書き換えたい
  • bootstrap-responsive.css自体を上書きしたくはない(メンテ面倒)

そこで今回の課題用に"sticky.css"を作成した。

  • headで読み込む順番は以下。
    • bootstrap.min.css
    • bootstrap-responsive.css
    • sticky.css
  • sticky.cssの内容
.navbar-fixed-top {
    position: fixed;
    padding: 0;
    margin: 0;
}

@media (max-width: 979px){
    body{
        padding-top: 70px;
    }
}

参考

Hi, I don't know if it's still relevant, but the trick seems to be to add following style to the navbar :

position: fixed; padding: 0px; margin: 0px;

I don't think it's a good idea to add it to the bootstrap-responsive.css, as it will be difficult to upgrade these files then. Better add your own .css file and put the extra css in there.

Hope this can help anyone :)