Twitter bootstrap 3 navbar navbar-right outside navbar-collapse

Question

On Twitter bootstrap 2.3.2 I might 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> 

Twitter twitter navigator, where in the mobile mobile mode "Fixed Link" remains visible in the header.

Now, in bootstrap 3, after updating my code, I can only: 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 mobile mode, I get 2 lines ... I tried to collapse the "navbar-header" node http://jsfiddle.net/EC3Ly/5/ or into the first "navigation header" without success.

What did I miss?

Thanks,

Alexander

Answer 1

Two lines in the mobile navigation bar are caused by the clearfix of the navbar header:

 .navbar-header { .clearfix(); @media (min-width: @grid-float-breakpoint) { float: left; } } 

You can use media queries and css to cancel this clearfix (and add a new one to the collapsed drop-down list)

 .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

Media queries also add float directly to the navigation bar on the right on smaller screens. To take this code during production, you might fix the boundaries and be able to use navbar css transcripts as well.

Answer 2

I ran into the same issue with BS3, and the only way I decided to resolve this 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

Answer 3

The problem is the point at which the navbar is reset. By default, Bootstrap crashes at 768 pixels. If you increase this value, your navbar will crash earlier and your problem will disappear.

The best way to do this is to set up your boot file and change @grid-float-breakpoint to 850px (or whatever size you need). You can easily configure bootstrap 3 from http://getbootstrap.com/customize/?id=9720390

Hope this helps.

Answer 4

I fixed it like this. Immediately after the brand, add two new lines with the same class and additional class.

  <!-- Branding Image --> <a class="navbar-brand" href="{{ url('/') }}">Home</a> <!-- Fake branding to avoid breaking up navbar --> <a class="navbar-brand navbar-brand-fake">Item 1</a> <a class="navbar-brand navbar-brand-fake">Item 2</a> 

And add this to your css file:

 a.navbar-brand-fake { font-size: 15px; line-height: 21px; margin-left: 2px !important; } 

Home, point 1 and point 2 remain on the navigation bar when resizing, and the navigation bar does not interrupt.