側欄導航改爲導航欄中的頂部導航欄

Question

我有一個側面導航欄內置twitter引導，它的移動工作很好，但是當它達到桌面大小時，我真的想要一個固定的頂部導航欄。我試圖添加媒體查詢來隱藏邊欄，但因爲我只是把我的頭圍繞在他們身上，所以我一直陷入困境。

一旦屏幕處於平板電腦尺寸，任何有關如何將側邊欄切換爲頂部導航欄的建議都將非常受歡迎。

這裏是代碼

感謝

HTML代碼

<div class="container-fluid"> 
    <nav> 
     <ul class="main-menu"> 
      <li class="text-right"><a href="#" id="nav-close">X</a></li> 
      <li><a href="#works">WORK</a></li> 
      <li><a href="about.html">ABOUT</a></li> 
      <li><a href="#footerwrap">CONTACT</a></li> 
     </ul> 
     <ul id="social"> 
       <li><a href="#"><span class="fa fa-github fa-2x" ></span> 
       <li><a href="#"><span class="fa fa-behance fa-2x"></span> 
       <li><a href="#"><span class="fa fa-linkedin fa-2x"></span> 
     </ul> 
    </nav> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <img class="logo"src="assets/img/logo2.svg" alt="logo">  
     <a class= "navbar-brand" href="#" ></a> 
     <div class="navbar-header pull-right"> 
      <a id="nav-expander" class="nav-expander fixed"> 
      <span class="fa fa-bars fa-2x"></span> 
      </a> 
     </div><!-- navbar headerclosed--> 
    </div><!-- navbar closed--> 
    </div><!-- container closed--> 

CSS CODE 
a.nav-expander { 
display: block; 
color: #576372; 
font-size: 20px; 
height: 50px; 
margin-right: 0; 
padding: 1em 1.6em 2em; 
position: absolute; 
right: 0; 
text-decoration: none; 
top: 0; 
transition: right 0.3s ease-in-out 0s; 
-webkit-transition: right 0.3s ease-in-out 0s; 
-moz-transition: right 0.3s ease-in-out 0s; 
-o-transition: right 0.3s ease-in-out 0s; 
} 
a.nav-expander.fixed { 
position: fixed; 
} 

.navbar { 
height: 100px; 
} 
nav { 
background: #333333; 
display: block; 
height: 100%; 
overflow: auto; 
position: fixed; 
right: -20em; 
font-size: 15px; 
top: 0; 
width: 10em; 
z-index: 2000; 
transition: right 0.3s ease-in-out 0s; 
-webkit-transition: right 0.3s ease-in-out 0s; 
-moz-transition: right 0.3s ease-in-out 0s; 
-o-transition: right 0.3s ease-in-out 0s; 
} 
.nav-expanded nav { 
right: 0; 
} 

#nav-close { 
padding-right: 10px; 
} 
.main-menu { 
padding-top: 12px; 
text-align: center; 
} 
.main-menu li { 
padding-bottom: 40px; 
} 
.main-menu li a { 
text-decoration: none; 
text-align: left; 
} 
.main-menu li a:hover { 
text-decoration: none; 
cursor: pointer; 
} 
#social{ 
padding-left: 10px; 
text-align: center; 
} 
#social li{ 
display: inline-block; 
padding-right: 5px; 
margin-right: 5px; 
} 

JS 

$(document).ready(function(){       

    //Navigation Menu Slider 
    $('#nav-expander').on('click',function(e){ 
     e.preventDefault(); 
     $('body').toggleClass('nav-expanded'); 
    }); 
    $('#nav-close').on('click',function(e){ 
     e.preventDefault(); 
     $('body').removeClass('nav-expanded'); 
    }); 

}); 

Answer 1

你不需要任何額外的CSS來回應你的設計，只要按照這個Link

使用該班根據您的需要，如智能手機使用clas="visible-xs"，那麼它只會顯示在智能手機和更小的設備和f或臺式機，筆記本電腦，智能電視等，您將添加class="visible-sm visible-md visible-lg"例如

<h1 class="visible-sm visible-md visible-lg"> Heading one </h1> 

上述標題將只顯示在桌面上，和更大的

<h3 class="visible-xs"> Heading one </h3> 

上述標題將只顯示在小型設備上。