Bootstrap - navbar-fixed-top涵蓋內容

我有一個關於navbar-fixed-top的問題。那麼，我有一個簡單的問題。我的固定導航欄覆蓋內容，例如在「關於我們」頁面中，它覆蓋了「關於我們」標題的行。Bootstrap - navbar-fixed-top涵蓋內容

我不知道該如何修復它，因爲當我調整網站大小（移動設備大小）時，標題是可見的。

當然，我有這種問題與其他頁面（全寬和404）的標題。

此外，在索引頁面中，它涵蓋了一些傳送帶滑塊。

信息：

網站：http://testerix.site90.com/index.html
引導2.3.2

讓我知道，我怎麼能解決這個問題的所有決議。

來源

2013-11-02 testerius

那麼，沒有人知道如何解決它？ – testerius

有這個問題的幾個副本 http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site 說，添加此CSS：體{填充頂：40像素; }}媒體屏幕和（最大寬度：768px）{padding-top：0px;}} } } ____________________________________________________________________ http：// stackoverflow。com/questions/10336194/twitter-bootstrap-top-nav-bar-blocking-top-content-of-page 這對我有效：對於引導程序3，navbar-static-top而不是固定的可以防止這個問題，除非你需要導航欄始終可見 –

的響應頁面：

Twitter Bootstrap - top nav bar blocking top content of the page

添加到您的CSS：

body { 
    padding-top: 65px; 
}

或更復雜的解決方案，但反應靈敏，如果你的導航欄改變高度（例如，在平板電腦中出現多達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 --> 
...

JAVASCRIPT：

<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>

來源

2014-08-26 05:41:51 Pablote

爲我工作，但感覺很冒險。 –

謝謝！它就像一個魅力！ – dotslash

嘗試類= 「導航欄靜態頂」。它仍然允許導航欄停留在頂部，但不會阻止內容。

來源

2014-09-23 22:58:40

是的，但它會阻止粘滯效果，所以當您向下滾動時會丟失導航欄。 – rory

-1

我這樣做：

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

這應該確保導航塊不拉伸downpage並覆蓋網頁內容。

來源

2015-04-30 18:30:33 developer10

這個建議並沒有真正奏效。 – Harlin

真的不是一個修復。導航塊會改變。你不想停止。 – RichieHH

Bootstrap - navbar-fixed-top涵蓋內容

回答

相關問題