侧栏导航改为导航栏中的顶部导航栏

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> 

上述标题将只显示在小型设备上。