當頁面縮小時，自舉nav-fixed-top覆蓋文本

我知道有很多關於此問題的問題，但我無法獲得令人滿意的回覆。當頁面縮小時，自舉nav-fixed-top覆蓋文本

我有一個帶有導航固定頂級引導類的菜單構建頁面。問題是這個菜單重疊了以下內容。

我一些如何解決問題定義菜單後的第一個元素60px的margin-top。問題是，當頁面縮小到移動設備的大小時，菜單將水平放大並重新覆蓋以下內容。

我的菜單，這樣創建：

<nav class="navbar navbar-inverse navbar-fixed-top navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <a class=navbar-brand href="#"> 
      My Brand 
     </a> 
     </div> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">ABOUT</a></li> 
     <li><a href="#portfolio">PORTFOLIO</a></li> 
     <li><a href="#contact">CONTACT</a></li> 
     </ul> 
    </div> 
    </nav>

而且例如所發生的事情可以在這裏成立的：http://codepen.io/miguelbgouveia/pen/QEvyrR

什麼是這個問題的解決方案？

來源

2016-06-30 miguelbgouveia

請看看這段代碼。 http://codepen.io/nehemc/pen/dXWGQd – Nehemiah

這是你期望的方式有菜單。 http://codepen.io/nehemc/pen/EymKNo – Nehemiah

這是一個聰明的解決方案@Nehemiah，但是當菜單橫向擴展時，它不會更多地固定在頂部。如果我們滾動頁面，菜單消失。請參閱此示例：http://codepen.io/miguelbgouveia/pen/QEvyrR – miguelbgouveia

讓媒體查詢來設置上邊距爲每個設備

Documentation

也不要使用你的標題設置的margin-top（當然不是ID）。但在你的容器中創建一個額外的類，如'內容'，並設置一個邊緣。或者只是使用body元素。

/*standard value for mobile devices, bootstrap is mobile first: */ 
.content { 
    margin-top:200px; 
} 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { 
.content { 
    margin-top: 100px; 
} 
} 


/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { 
.content { 
    margin-top: 80px; 
} 
} 


/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { 
    .content { 
    margin-top: 60px; 
} 
}

來源

2016-06-30 09:28:45 Christophvh

我嘗試你的解決方案，但它不起作用。你可以在這裏看到id：https://codepen.io/miguelbgouveia/pen/QEvyrR我錯過了什麼？ – miguelbgouveia

我發佈的代碼是帶有示例值。我將其改爲真正的價值。你仍然需要利用margin-top像素來獲得你需要的結果 – Christophvh

我更新了代碼，我忘了指定內容的標準值（這是移動值，因爲bootstrap是移動優先的）。嘗試我的新代碼，它應該工作 – Christophvh

您也可以使用此代碼以獲得更好的標準。 http://codepen.io/nehemc/pen/dXWGQd

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
     <a class="navbar-brand" href="#">Brand</a> </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">ABOUT</a></li> 
     <li><a href="#portfolio">PORTFOLIO</a></li> 
     <li><a href="#contact">CONTACT</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<div class="container"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <h4 id="first-title">Title 1</h4> 
     <h4>Title 2</h4> 
     <h4>Title 3</h4> 
    </div> 
    </div> 
</div>

來源

2016-06-30 09:47:27 Nehemiah

這是一個很好的解決方案，但真的不喜歡漢堡包圖標中菜單的崩潰。請參閱這篇關於隱藏導航問題的文章：https：//www.nngroup.com/articles/hamburger-menus/ – miguelbgouveia

當頁面縮小時，自舉nav-fixed-top覆蓋文本

回答

相關問題