Question

我有一个内置在twitter引导程序中的侧导航栏，它适用于移动设备，但当它达到桌面尺寸时，我真的想要一个固定的顶部导航栏。我已经尝试添加媒体查询来隐藏侧边栏但是因为我只是绕过他们，我一直卡住了。

任何有关如何在屏幕处于平板电脑尺寸后将侧边栏换成顶部导航栏的建议都将受到欢迎。

这是代码

由于

HTML CODE

<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"，然后仅在智能手机和小型设备以及台式机，笔记本电脑，智能电视等中显示，您将添加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>

上述标题仅在小型设备上显示..

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

1 个答案: