Twitter bootstrap 3 navbar navbar-right outside navbar-collapse
Solution 1
The two lines in the mobile navbar are caused by the clearfix of the navbar-header:
.navbar-header {
.clearfix();
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
You could use media queries and css to undo this clearfix (and add a new before the collapsed dropdown)
.navbar-right {float: right !important;}
@media(max-width:767px)
{
.navbar-right {margin-right:20px;}
.navbar-header:after
{
clear: none;
}
.navbar-nav.navbar-right > li { float: left; }
.navbar-collapse:before {clear:both;}
.navbar-collapse {overflow-y: hidden;}
.navbar-collapse.in {overflow-y: visible;}
.navbar{border-color: #101010; border-width: 0 0 1px;}
.navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}
}
demo: http://bootply.com/82366
The media queries also add a float right for the navbar-right on smaller screens. To take this code in production, you maybe will fix the borders and possible the navbar css transisions too.
Solution 2
I faced the same problem with BS3, and the only way I found to resolve it was to use a combination of pull-left
and pull-right
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">BRAND</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li>
<a href="#">Fixed Link</a>
</li>
</ul>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">L1</a></li>
<li><a href="#">L2</a></li>
</ul>
</div>
</div>
</nav>
Working demo: http://bootply.com/78856
heralight
Member of HEIRKO - Software development and consulting Work on Primimo - a free geotagged real estate ads platform
Updated on July 10, 2022Comments
-
heralight almost 2 years
In Twitter bootstrap 2.3.2 I can have something like: http://jsfiddle.net/aQwUZ/3/
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand">BRAND</a> <ul class="nav pull-right"> <li> <a href="#">Fixed Link</a> </li> </ul> <div class="nav-collapse"> <ul class="nav"> <li><a href="#">L1</a></li> <li><a href=#">L2</a></li> </ul> </div> </div> </div> </div>
A twitter bootstrap navbar, where in mobile responsive view, "Fixed Link" stay visible in header.
Now, in bootstrap 3, after upgrade my code, I can only have: http://jsfiddle.net/EC3Ly/4/
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">BRAND</a> </div> <ul class="nav navbar-nav navbar-right"> <li> <a href="#">Fixed Link</a> </li> </ul> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">L1</a></li> <li><a href=#">L2</a></li> </ul> </div> </div> </nav>
in mobile responsive view, I get 2 lines... I tried to wrap in a "navbar-header" node http://jsfiddle.net/EC3Ly/5/ or in the first "navbar-header" without success.
What did I miss?
Thanks,
Alexandre
-
heralight over 10 yearsI also try with pull-left and pull-right, but this solution break some behavior in mobile view: _ "Fixed Link" can't have a right margin and when this node is dropdown node, it turns very bad.
-
colllin about 10 years@heralight I had to manually override the bootstrap dropdown styles for
.navbar-nav .open .dropdown-menu
and.navbar-nav .open .dropdown-menu > li > a
-
RemusT about 10 yearsThanks, Lucian. I'm new to Stack :)
-
Jon almost 9 yearsIf you have multiple fixed links they stack on top of one another when collapsed.