Bootstrap固定菜單隱藏內容

我在我的網頁中使用引導固定菜單，但菜單欄隱藏了頁面的一些內容，特別是當屏幕尺寸減小時，響應菜單將隱藏更多內容。代碼Bootstrap固定菜單隱藏內容

例如：

<nav class="navbar navbar-inverse navbar-fixed-top" style ="background:#141414"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand navbar-left" href="#" style="font-family:'Adobe Arabic';font-size:xx-large; font-weight:bold;"><?php echo $strMnuBrand; ?> 
 
     \t </a> 
 
    </div> 
 
    <ul class="nav navbar-nav navbar-left"> 
 
     <li class="active" ><a href="#" style="background:#ff6600; color:#e7e7e7; font-weight:bold;"><?php echo $strMnuHome ?></a></li> 
 
     <li><a href="#" style="color:#e7e7e7;"><?php echo $strMnuPage1 ?></a></li> 
 
     <li><a href="#" style="color:#e7e7e7;"><?php echo $strMnuPage2 ?></a></li> 
 
    
 
    </ul>

...等。我該怎麼做，固定菜單不會隱藏頁面內容，並且頁面保持響應？

注：我搜索瞭解決方案，但沒有人爲我工作！

來源

2016-07-13 Parc Roi

如果您使用的是頂部固定的導航欄，則需要添加與導航欄高度相等的頂部填充+填充到身體的位置。像這樣：

body { 
    padding-top: 70px; 
}

請確保在覈心Bootstrap CSS後包含此項。

來源

2016-07-13 21:20:14

我測試了類似的解決方案，但它沒有工作 –

當屏幕尺寸縮小時，下面的代碼將不會隱藏任何菜單項，並且也會響應並顯示所有屏幕尺寸的菜單項。

你可以看到它在行動here

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 

     <a class="navbar-brand" href="#">Brand Name</a> 
    </div> 
    <div class="" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

來源

2016-07-13 21:31:42

肯定的，但菜單是不固定的！ –

Bootstrap固定菜單隱藏內容

回答

相關問題