css - Twitter Bootstraps モバイル navbar を取得して、コンテンツを押し下げるのではなく、ページのコンテンツをオーバーレイするにはどうすればよいですか?

Question

Twitter Bootstrap を使用しており、モバイル ナビゲーション バーを変更して、展開したときにドロップダウン メニューがページのコンテンツを押し下げるのではなくオーバーレイするようにしたいと考えています。絶対に配置されたメニューを作成し、<div>z-indexを増やし、外側<div>を相対的に配置する必要があることはわかっていますが、うまく機能しないようです。

これを行う方法について何か提案はありますか?

これが私が始めているJSFiddleです。

Answer 1

navbar-absolutenavbar に次のようなクラスを追加する場合:

<div class="navbar navbar-fixed-top navbar-absolute">...</div>

、およびいくつかの CSS ルール:

@media (max-width: 979px) {
  .navbar-fixed-top.navbar-absolute {
    position: absolute;
    margin: 0;
  }
}

.navbar-absolute + div {
    margin-top: 68px;
}

それはあなたが始める必要があります.

JSFiddle

Answer 2

私はそれを機能させるために両方の答えを組み合わせて使用​​ しました。Inspect Element を使用して、ナビゲーション バーの高さを把握します (高さが分からない場合)。その数値の上マージンで次の div を設定します。次に、navbar を navbar-fixed-top に設定します。