下拉菜单将导航栏向下推。如何避免呢？ [英] Drop-down menu is pushing the navbar down. How to avoid it?
本文介绍了下拉菜单将导航栏向下推。如何避免呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手上路和web开发。
我想建立一个网页，其中有两个导航栏，根据屏幕大小，只会显示一个导航栏。对于屏幕大小> 768px一切工作正常（至少它似乎）。 为了降低分辨率，下拉菜单会将导航栏向下推过内容。
如何避免这种情况？任何形式的帮助将不胜感激。提前感谢。
点击此链接查看jsfiddle https://jsfiddle.net/pavan39/rk6m3ho8/2/
@import url （'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'）; #header {position：relative; z-index：1010;} / * nav style * /。navbar-default {border-bottom：0.5px solid rgb（180,180,180）;} navbar-brand {font-family：Comic Sans MS;颜色：rgb（0,50,150）; font-size：150％; font-weight：italic;} / * end * // * desktop bar related * / @ media（max-width：767px）{.desktop-bar {/ * margin：10px 10px 10px 10px; * / display：none;} } .mob-nav {margin：0px; padding：0px;显示：-webkit-flex;显示：flex; -webkit-flex-flow：row; flex-flow：row; -webkit-flex-wrap：nowrap; flex-wrap：nowrap; -webkit-justify-content：flex-start; / * Safari * / justify-content：flex-start;} mob-home {-webkit-order：1; / * Safari * / order：1; -webkit-flex-grow：1; / * Safari * / flex-grow：1; margin-left：-1em;}。mob-search {/ * width：50％; margin-top：0.2em; * / margin-top：0.5em; -webkit-order：2; / * Safari * / order：2; -webkit-flex-grow：2; / * Safari * / flex-grow：2; min-width：6em; size：50％}。mob-notify {-webkit-order：3; / * Safari * / order：3; --webkit-flex-grow：1; / * Safari * / flex-grow：1; min-width：5em;}。mob-more {/ * width：7em; * / -webkit-order：4; / * Safari * / order：4; -webkit-flex-grow：2; / * Safari * / flex-grow：2; min-width：7em;} @ media（min-width：768px）{.mobile-bar {/ * margin：10px 10px 10px 10px; * / display：none;}} / * end * /。wrapper {padding-top ：50px;}。badge-danger {background-color：＃d43f3a;}。badge-mob-notify {margin-left：-0.5em; margin-top：-0.5em;}
< div id =header> < div class =desktop-bar> < nav class =navbar navbar navbar-default navbar-fixed-top> < div class =container> < div class =navbar-header> < a class =navbar-brandhref =＃> Brand< / a> < / div> < ul class =nav navbar-nav navbar-leftrole =navigation> < li role =presentationclass =dropdown> < a class =dropdown-toggledata-toggle =dropdownhref =＃role =buttonaria-havepopup =truearia-expanded =false> < i class =fa fa-plus fa-lg>< / i>& nbsp; < span>添加< / span>< span class =caret>< / span> < / a> < ul class =dropdown-menu> < li>< a href =＃> 1< / a>< / li> < li>< a href =＃> 2< / a>< / li> < li>< a href =＃> 3< / a>< / li> < li role =separatorclass =divider>< / li> < li>< a href =＃> 4< / a>< / li> < / ul> < / li> < li role =presentation> < form class =desktop-search navbar-form navbar-leftrole =search> < div class =input-group> < input type =textclass =form-controlplaceholder =search a placename =srch-termid =srch-term> < span class =input-group-btn> < button class =btn btn-defaulttype =submit>< i class =glyphicon glyphicon-search>< / i>< / button> < / span> < / div> < / form> < / li> < / ul> < ul class =nav navbar-nav navbar-rightrole =navigation> < li role =presentation>< a href =＃>< i class =fa fa-heart fa-lg>< / i& < span class =nav-description>收藏夹< / span>< / a>< / li& < li role =presentation>< a href =＃>< i class =fa fa-bell fa-lg>< / i>& nbsp; < / span>< / sup>< / span>< / span>< span class =nav-description< a>< / li> < li role =presentationclass =dropdown> < a class =dropdown-toggledata-toggle =dropdownhref =＃role =buttonaria-havepopup =truearia-expanded =false> < span class =nav-description>< img style =height：22px; width：22pxsrc =pseudo.pngclass =img-circle>< sup> =badge badge-danger badge-msgs> 6< / span>< / sup>< / span>< span class =caret>< / span& < / a> < ul class =dropdown-menu> < li>< a href =＃>个人资料< / a>< / li> < li>< li>< a href =＃>讯息< sup>< span class =badge badge-danger badge-msgs> 6< / span>< / sup>< / a> ; / li> < li>< a href =＃>反馈< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li role =separatorclass =divider>< / li> < li>< a href =＃>退出< / a>< / li> < / ul> < / li> < / ul> < / div> < / nav> < / div> < div class =mobile-bar> < nav class =navbar navbar navbar-default navbar-fixed-top> < div class =container> < ul class =mob-nav nav navbar-navrole =navigation> < li role =presentationclass =mob-home>< a href =＃>< i class =fa fa-home>< / i>& nbsp; ; / a>< / li> < li role =presentationclass =mob-search> < form class =mob-search-bar navbar-searchrole =search> < div class =input-group> < input type =textclass =form-controlplaceholder =name =srch-termid =srch-term> < span class =input-group-btn> < button class =btn btn-defaulttype =submit>< i class =glyphicon glyphicon-search>< / i>< / button> < / span> < / div> < / form> < / li> < li role =presentationclass =mob-notify>< a href =＃>< i class =fafa-bell fa>< / i& < />< / a>< / li>< / span>< < li angle =presentationclass =mob-more> < a class =dropdown-toggledata-toggle =dropdownhref =＃role =buttonaria-havepopup =truearia-expanded =false> < span class =nav-description>< img style =height：22px; width：22pxsrc =pseudo.pngclass =img-circle>< sup> =badge badge-danger badge-mob-msgs> 6< / span>< / sup>< / span>< span class =caret>< / span> < / a> < ul class =dropdown-menustyle =z-index：99999;> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>讯息< sup>< span class =badge badge-danger badge-mob-msgs> 6< / span>< / sup>< / a> ;< / li> < li>< a href =＃>收藏< / a>< / li> < li>< a href =＃>反馈< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li role =separatorclass =divider>< / li> < li>< a href =＃>退出< / a>< / li> < / ul> < / li> < / ul> < / div> < / nav> < / div>< / div>< div class =wrapper> < div class =nav> nav< / div> < div class =article> artcle< / div> < div class =aside> aside< / div>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script& < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.jsintegrity =sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xScrossorigin =anonymous>< / script> / code>
解决方案
Bootstrap
Bootstrap基于以下假设：当屏幕宽度为767像素或更小时，所有菜单项都会折叠。这就是为什么下拉菜单改变其行为。
所以你必须重新定义 .navbar-nav .open .dropdown的样式。菜单类。我正在使用此变体：
@media（max-width：767px）{
.navbar-nav .open .dropdown-menu {
position：absolute;
右：0;
left：auto;
padding：5px 0;
margin：2px 0 0;
background-color：#fff;
border：1px solid #ccc;
border：1px solid rgba（0,0,0，.15）;
border-radius：4px;
-webkit-box-shadow：0 6px 12px rgba（0,0,0，.175）;
box-shadow：0 6px 12px rgba（0,0,0，.175）;
}
.navbar-nav .open .dropdown-menu> li> a {
color：＃000;
padding：3px 20px;
line-height：1.42857143;
}
.navbar-nav .open .dropdown-menu> li> a：hover，
.navbar-nav .open .dropdown-menu> li> a：focus {
color：＃333;
background-color：＃e7e7e7！important;
background-image：none;
}
.navbar-nav .open .dropdown-menu> .active> a，
.navbar-nav .open .dropdown-menu> .active> a：hover，
.navbar-nav .open .dropdown-menu> .active> a：focus {
color：＃555;
background-color：＃e7e7e7！important;
}
.navbar-nav .open .dropdown-menu> .disabled> a，
.navbar-nav .open .dropdown-menu> .disabled> a：hover，
.navbar-nav .open .dropdown-menu> .disabled> a：focus {
color：#ccc;
background-color：transparent;
}
}
请检查结果： https://jsfiddle.net/glebkema/c7thd7gh/
$（document）.ready（function（）{$（'。dropdown-toggle'）。dropdown（）;}）;
@import url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css /bootstrap.min.css');#header {position：relative; z-index：1010;} / * nav style * /。navbar-default {border-bottom：0.5px solid rgb（180，180，180）;}。navbar-brand {font-family：Comic Sans MS; color：rgb（0，50，150）; font-size：150％; font-weight：italic;} / *桌面栏相关* / @ media（max-width：767px）{.desktop-bar {/ * margin：10px 10px 10px 10px; * / display：none; }}。mob-nav {margin：0px; padding：0px;显示：-webkit-flex;显示：flex; -webkit-flex-flow：row; flex-flow：row; -webkit-flex-wrap：nowrap; flex-wrap：nowrap; -webkit-justify-content：flex-start; justify-content：flex-start;}。mob-home {-webkit-order：1; order：1; -webkit-flex-grow：1; flex-grow：1; margin-left：-1em;}。mob-search {/ * width：50％; margin-top：0.2em; * / margin-top：0.5em; -webkit-order：2;顺序：2; -webkit-flex-grow：2; flex-grow：2; min-width：6em; size：50％}。mob-notify {-webkit-order：3; order：3; -webkit-flex-grow：1; flex-grow：1; min-width：5em;}。mob-more {/ * width：7em; * / -webkit-order：4;顺序：4; -webkit-flex-grow：2; flex-grow：2; min-width：7em;} @ media（min-width：768px）{.mobile-bar {/ * margin：10px 10px 10px 10px; * / display：none; }}。wrapper {padding-top：50px;}。badge-danger {background-color：＃d43f3a;}。badge-mob-notify {margin-left：-0.5em; margin-top：-0.5em;} / *下拉菜单* / @ media（max-width：767px）{.navbar-nav .open.dropdown-menu {position：absolute; right：0; left：auto; padding：5px 0; margin：2px 0 0; background-color：#fff; border：1px solid #ccc; border：1px solid rgba（0，0，0，.15）; border-radius：4px; -webkit-box-shadow：0 6px 12px rgba（0，0，0，.175）; box-shadow：0 6px 12px rgba（0，0，0，.175）; } .navbar-nav .open .dropdown-menu> li> a {color：＃000; padding：3px 20px; line-height：1.42857143; } .navbar-nav .open .dropdown-menu> li> a：hover，.navbar-nav .open .dropdown-menu> li> a：focus {color：＃333; background-color：＃e7e7e7！important; background-image：none; } .navbar-nav .open .dropdown-menu> .active> a，.navbar-nav .open .dropdown-menu> .active> a：hover，.navbar-nav .open .dropdown-menu> .active> a：focus {color：＃555; background-color：＃e7e7e7！important; } .navbar-nav .open .dropdown-menu> .disabled> a，.navbar-nav .open .dropdown-menu> .disabled> a：hover，.navbar-nav .open .dropdown-menu> .disabled> a：focus {color：#ccc; background-color：transparent; }}
< div id =header> < div class =desktop-bar> < nav class =navbar navbar navbar-default navbar-fixed-top> < div class =container> < div class =navbar-header> < a class =navbar-brandhref =＃> Brand< / a> < / div> < ul class =nav navbar-nav navbar-leftrole =navigation> < li role =presentationclass =dropdown> < a class =dropdown-toggledata-toggle =dropdownhref =＃role =buttonaria-havepopup =truearia-expanded =false> < i class =fa fa-plus fa-lg>< / i>& nbsp; < span>添加< / span>< span class =caret>< / span> < / a> < ul class =dropdown-menu> < li>< a href =＃> 1< / a>< / li> < li>< a href =＃> 2< / a>< / li> < li>< a href =＃> 3< / a>< / li> < li role =separatorclass =divider>< / li> < li>< a href =＃> 4< / a>< / li> < / ul> < / li> < li role =presentation> < form class =desktop-search navbar-form navbar-leftrole =search> < div class =input-group> < input type =textclass =form-controlplaceholder =search a placename =srch-termid =srch-term> < span class =input-group-btn> < button class =btn btn-defaulttype =submit>< i class =glyphicon glyphicon-search>< / i>< / button> < / span> < / div> < / form> < / li> < / ul> < ul class =nav navbar-nav navbar-rightrole =navigation> < li role =presentation>< a href =＃>< i class =fa fa-heart fa-lg>< / i& < span class =nav-description>收藏夹< / span>< / a>< / li& < li role =presentation>< a href =＃>< i class =fa fa-bell fa-lg>< / i>& nbsp; < / span>< / sup>< / span>< / span>< span class =nav-description< a>< / li> < li role =presentationclass =dropdown> < a class =dropdown-toggledata-toggle =dropdownhref =＃role =buttonaria-havepopup =truearia-expanded =false> < span class =nav-description>< img style =height：22px; width：22pxsrc =pseudo.pngclass =img-circle>< sup> =badge badge-danger badge-msgs> 6< / span>< / sup> < / span>< span class =caret>< / span> < / a> < ul class =dropdown-menu> < li>< a href =＃>个人资料< / a>< / li> < li>< li>< a href =＃>讯息< sup>< span class =badge badge-danger badge-msgs> 6< / span>< / sup>< / a> ; / li> < li>< a href =＃>反馈< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li role =separatorclass =divider>< / li> < li>< a href =＃>退出< / a>< / li> < / ul> < / li> < / ul> < / div> < / nav> < / div> < div class =mobile-bar> < nav class =navbar navbar navbar-default navbar-fixed-top> < div class =container> < ul class =mob-nav nav navbar-navrole =navigation> < li role =presentationclass =mob-home>< a href =＃>< i class =fa fa-home>< / i>& nbsp; ; / a>< / li> < li role =presentationclass =mob-search> < form class =mob-search-bar navbar-searchrole =search> < div class =input-group> < input type =textclass =form-controlplaceholder =name =srch-termid =srch-term> < span class =input-group-btn> < button class =btn btn-defaulttype =submit>< i class =glyphicon glyphicon-search>< / i>< / button> < / span> < / div> < / form> < / li> < li role =presentationclass =mob-notify>< a href =＃>< i class =fafa-bell fa>< / i& < />< / a>< / li>< / span>< < li role =presentationclass =mob-more dropdown> < a class =dropdown-toggledata-toggle =dropdownhref =＃role =buttonaria-havepopup =truearia-expanded =false> < span class =nav-description>< img style =height：22px; width：22pxsrc =pseudo.pngclass =img-circle>< sup> =badge badge-danger badge-mob-msgs> 6< / span>< / sup> < / span>< span class =caret>< / span> < / a> < ul class =dropdown-menustyle =z-index：99999;> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>讯息< sup>< span class =badge badge-danger badge-mob-msgs> 6< / span>< / sup>< / a> ;< / li> < li>< a href =＃>收藏< / a>< / li> < li>< a href =＃>反馈< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li role =separatorclass =divider>< / li> < li>< a href =＃>退出< / a>< / li> < / ul> < / li> < / ul> < / div> < / nav> < / div>< / div>< div class =wrapper> < div class =nav> nav< / div> < div class =article> artcle< / div> < div class =aside> aside< / div>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script& < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.jsintegrity =sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xScrossorigin =anonymous>< / script> / code>
I am new to bootstrap and web development.
I wanted to build one webpage which has two navbars and depending on the screen size, only one navbar will be displayed. For screen size>768px everything is working fine (at least it seems). For lower resolution, the dropdown menu is pushing the navbar down over the content.
How to avoid this? Any kind of help would be appreciated. Thanks in advance.
Click this link for the jsfiddle https://jsfiddle.net/pavan39/rk6m3ho8/2/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#header
{
position: relative;
z-index: 1010;
}
/* nav styling*/
.navbar-default{
border-bottom: 0.5px solid rgb(180,180,180);
}
.navbar-brand{
font-family:Comic Sans MS;
color:rgb(0,50,150);
font-size:150%;
font-weight:italic;
}
/*end*/
/*desktop bar related*/
@media(max-width:767px)
{
.desktop-bar{
/*margin: 10px 10px 10px 10px;*/
display:none;}
}
.mob-nav{
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start; /* Safari */
justify-content: flex-start;
}
.mob-home{
-webkit-order: 1; /* Safari */
order: 1;
-webkit-flex-grow: 1; /* Safari */
flex-grow: 1;
margin-left:-1em;
}
.mob-search{
/*width:50%;
margin-top:0.2em;*/
margin-top:0.5em;
-webkit-order: 2; /* Safari */
order: 2;
-webkit-flex-grow: 2; /* Safari */
flex-grow: 2;
min-width:6em;
size:50%
}
.mob-notify{
-webkit-order: 3; /* Safari */
order: 3;
-webkit-flex-grow: 1; /* Safari */
flex-grow: 1;
min-width:5em;
}
.mob-more{
/*width:7em;*/
-webkit-order: 4; /* Safari */
order:4;
-webkit-flex-grow: 2; /* Safari */
flex-grow: 2;
min-width:7em;
}
@media(min-width:768px)
{
.mobile-bar{
/*margin: 10px 10px 10px 10px;*/
display:none;}
}
/*end*/
.wrapper{
padding-top:50px;
}
.badge-danger {
background-color: #d43f3a;
}
.badge-mob-notify{
margin-left:-0.5em;
margin-top:-0.5em;
}
<div id="header">
<div class = "desktop-bar">
<nav class="navbar navbar navbar-default navbar-fixed-top">
<div class="container">
<div class = "navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-left" role="navigation">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-plus fa-lg "></i> <span >Add</span><span class=" caret"></span>
</a>
<ul class= "dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">4</a></li>
</ul>
</li>
<li role="presentation">
<form class= "desktop-search navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search a place" name="srch-term" id="srch-term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" role="navigation">
<li role="presentation"><a href="#"><i class=" fa fa-heart fa-lg"></i> <span class=" nav-description">Favorites</span></a></li>
<li role="presentation"><a href="#"><i class=" fa fa-bell fa-lg"></i> <span class=" nav-description">Notifications<sup><span class="badge badge-danger badge-notify">8</span></sup></span></a></li>
<li role="presentation" class= " dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-msgs">6</span></sup></span><span class="caret"></span>
</a>
<ul class= "dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Messages<sup><span class="badge badge-danger badge-msgs">6</span></sup></a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Settings</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div class = "mobile-bar">
<nav class="navbar navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="mob-nav nav navbar-nav" role="navigation">
<li role="presentation" class="mob-home"><a href="#"><i class="fa fa-home "></i> </a></li>
<li role="presentation" class="mob-search">
<form class= "mob-search-bar navbar-search" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder= "" name="srch-term" id="srch-term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</li>
<li role="presentation" class="mob-notify"><a href="#"><i class=" fa fa-bell fa"></i> <sup><span class="badge badge-danger badge-mob-notify">8</span></sup></a></li>
<li role="presentation" class="mob-more">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></span><span class="caret"></span>
</a>
<ul class= "dropdown-menu" style="z-index:99999;">
<li><a href="#">Profile</a></li>
<li><a href="#">Messages<sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></a></li>
<li><a href="#">Favorites</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Settings</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="wrapper">
<div class ="nav">
nav
</div>
<div class="article">
artcle
</div>
<div class="aside">
aside
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
解决方案
CSS for Bootstrap dropdown menu, which is not collapsed on the narrow screen
Bootstrap is based on the assumption that all menu items becomes collapsed when the screen width is 767px or less. That's why dropdown menu changes its behavior. Now it opens like a part of the common collapsed menu.
So you have to redefine styles for the .navbar-nav .open .dropdown-menu class. I am using this variant:
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: absolute;
right: 0;
left: auto;
padding: 5px 0;
margin: 2px 0 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-nav .open .dropdown-menu > li > a {
color: #000;
padding: 3px 20px;
line-height: 1.42857143;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
background-color: #e7e7e7 !important;
background-image: none;
}
.navbar-nav .open .dropdown-menu > .active > a,
.navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555;
background-color: #e7e7e7 !important;
}
.navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #ccc;
background-color: transparent;
}
}
Please check the result: https://jsfiddle.net/glebkema/c7thd7gh/
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#header {
position: relative;
z-index: 1010;
}
/* nav styling*/
.navbar-default {
border-bottom: 0.5px solid rgb(180, 180, 180);
}
.navbar-brand {
font-family: Comic Sans MS;
color: rgb(0, 50, 150);
font-size: 150%;
font-weight: italic;
}
/*desktop bar related*/
@media (max-width:767px) {
.desktop-bar {
/*margin: 10px 10px 10px 10px;*/
display: none;
}
}
.mob-nav {
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.mob-home {
-webkit-order: 1;
order: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
margin-left: -1em;
}
.mob-search {
/*width:50%;
margin-top:0.2em;*/
margin-top: 0.5em;
-webkit-order: 2;
order: 2;
-webkit-flex-grow: 2;
flex-grow: 2;
min-width: 6em;
size: 50%
}
.mob-notify {
-webkit-order: 3;
order: 3;
-webkit-flex-grow: 1;
flex-grow: 1;
min-width: 5em;
}
.mob-more {
/*width:7em;*/
-webkit-order: 4;
order: 4;
-webkit-flex-grow: 2;
flex-grow: 2;
min-width: 7em;
}
@media(min-width:768px) {
.mobile-bar {
/*margin: 10px 10px 10px 10px;*/
display: none;
}
}
.wrapper {
padding-top: 50px;
}
.badge-danger {
background-color: #d43f3a;
}
.badge-mob-notify {
margin-left: -0.5em;
margin-top: -0.5em;
}
/* dropdown menu */
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: absolute;
right: 0;
left: auto;
padding: 5px 0;
margin: 2px 0 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-nav .open .dropdown-menu > li > a {
color: #000;
padding: 3px 20px;
line-height: 1.42857143;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
background-color: #e7e7e7 !important;
background-image: none;
}
.navbar-nav .open .dropdown-menu > .active > a,
.navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555;
background-color: #e7e7e7 !important;
}
.navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #ccc;
background-color: transparent;
}
}
<div id="header">
<div class="desktop-bar">
<nav class="navbar navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-left" role="navigation">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-plus fa-lg "></i> <span>Add</span><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">4</a></li>
</ul>
</li>
<li role="presentation">
<form class="desktop-search navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search a place" name="srch-term" id="srch-term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" role="navigation">
<li role="presentation"><a href="#"><i class=" fa fa-heart fa-lg"></i> <span class=" nav-description">Favorites</span></a></li>
<li role="presentation"><a href="#"><i class=" fa fa-bell fa-lg"></i> <span class=" nav-description">Notifications<sup><span class="badge badge-danger badge-notify">8</span></sup></span></a></li>
<li role="presentation" class=" dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-msgs">6</span></sup>
</span><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Messages<sup><span class="badge badge-danger badge-msgs">6</span></sup></a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Settings</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div class="mobile-bar">
<nav class="navbar navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="mob-nav nav navbar-nav" role="navigation">
<li role="presentation" class="mob-home"><a href="#"><i class="fa fa-home "></i> </a></li>
<li role="presentation" class="mob-search">
<form class="mob-search-bar navbar-search" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="" name="srch-term" id="srch-term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</li>
<li role="presentation" class="mob-notify"><a href="#"><i class=" fa fa-bell fa"></i> <sup><span class="badge badge-danger badge-mob-notify">8</span></sup></a></li>
<li role="presentation" class="mob-more dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-mob-msgs">6</span></sup>
</span><span class="caret"></span>
</a>
<ul class="dropdown-menu" style="z-index:99999;">
<li><a href="#">Profile</a></li>
<li><a href="#">Messages<sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></a></li>
<li><a href="#">Favorites</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Settings</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="wrapper">
<div class="nav">
nav
</div>
<div class="article">
artcle
</div>
<div class="aside">
aside
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
这篇关于下拉菜单将导航栏向下推。如何避免呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
