Twitter bootstrap 侧栏导航更改为引导中的顶部导航栏

我有一个内置在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');
    });

 });

---

您不需要任何额外的css来响应您的设计，只需遵循以下步骤

根据您的需要使用此类，如智能手机使用clas=visible xs，则仅在智能手机和小型设备中显示，对于台式机、笔记本电脑、智能电视等，您将添加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>

---

上面的标题将仅在小型设备上显示。

谢谢，我将试一试。