web-dev-qa-db-ja.com

Bootstrap-navbar-fixed-top Covers content

Navbar-fixed-topについて質問があります。まあ、私はそれに簡単な問題があります。私の固定ナビゲーションバーはコンテンツをカバーします。たとえば、「About us」ページでは、「About us」というタイトルの行をカバーしています。

Webサイト（モバイルデバイスのサイズ）のサイズを変更するとヘッダーが表示されるので、どうすれば修正できるかわかりません。

もちろん、私は他のページのヘッダー（全幅と404）でこの種の問題を抱えています。

また、インデックスページでは、カルーセルスライダーの一部をカバーしています。

情報：

すべての解像度でどうすれば修正できますか？.

twitter-bootstrapfixednavbar
13
testerius

応答はページにあります：

Twitter Bootstrap-ページのトップコンテンツをブロックするトップナビゲーションバー

CSSに追加：

body { 
    padding-top: 65px; 
}

または、より複雑なソリューションですが応答性があります。ナビゲーションバーの高さを変更した場合（タブレットのexが60pxに表示される、または異なる場合）、CSSとJavaScriptの混合ソリューションを使用します

CSS：

    #godown{
   height: 60px;
}

HTML（再開）

<body>
<nav class="navbar navbar-fixed-top " role="navigation" id="navMenu">
...

</nav>

<!-- This div make the magic :) -->

<div class="godown-60" id="godown"></div>

<!-- the rest of your site -->
...

ジャバスクリプト：

<script>
//insert this in your jquery
//control the resizing of menu and go down the content in the correct position

    $("#navMenu").resize(function () {
        $('#godown').height($("#navMenu").height() + 10);
    });

    if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10);

</script>
15
Pablote

Class = "navbar-static-top"を試してください。それでもナビゲーションバーを上部に表示できますが、コンテンツはブロックされません。

9
Antonio Jha

position: sticky の代わりに position: staticトリックをしてくれました。

0
yay

私はこれを行います：

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

これにより、navブロックがダウンページを拡大せず、ページコンテンツをカバーするようになります。

0
developer10

コンテンツにIDまたはクラスを追加し、静的なナビゲーションバーが邪魔することなくコンテンツを表示するのに十分なマージントップを与え、「！important」属性を追加して動作させるだけです。

0
DamiCode