边栏导航更改为引导中的顶部导航栏

DG-UXD

我有一个内置在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>

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

引导导航栏中的下拉边距

来自分类Dev

引导导航栏-从静态更改为动态固定

来自分类Dev

删除引导导航栏上的顶部填充

来自分类Dev

引导中溢出的导航栏

来自分类Dev

导航栏中的引导图片

来自分类Dev

在第一个孩子上更改引导导航栏边栏元素颜色

来自分类Dev

jQuery:粘性导航栏更改边距

来自分类Dev

在react-native中更改顶部导航栏的颜色

来自分类Dev

滚动顶部导航栏

来自分类Dev

在导航栏顶部查看

来自分类Dev

更改我的引导导航栏中链接的颜色

来自分类Dev

如果用户登录,则在引导程序中更改导航栏

来自分类Dev

如果用户登录,则在引导程序中更改导航栏

来自分类Dev

在引导程序 3.3.7 中更改导航栏断点

来自分类Dev

在引导程序导航栏中更改最大高度

来自分类Dev

更改边框颜色导航栏引导3

来自分类Dev

无法更改引导导航栏的颜色

来自分类Dev

如何更改引导导航栏图标?

来自分类Dev

引导程序更改导航栏颜色

来自分类Dev

引导导航栏崩溃

来自分类Dev

引导导航栏崩溃

来自分类Dev

引导导航栏?

来自分类Dev

引导导航栏

来自分类Dev

在Swift中更改导航栏

来自分类Dev

在Swift中更改导航栏

来自分类Dev

当窗口变小时,垂直导航栏更改为水平,页边距问题

来自分类Dev

Bootstrap 顶部导航栏:边距和高度

来自分类Dev

无法摆脱导航栏项目的顶部/底部边距?

来自分类Dev

将元素放置在导航栏中的顶部