Twitter bootstrap 3 navbar navbar-right outside navbar-collapse

Question

In Twitter bootstrap 2.3.2 I can have something like: http://jsfiddle.net/aQwUZ/3/ ``` ``` 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/ ```

Accepted Answer

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.

Twitter bootstrap 3 navbar navbar-right outside navbar-collapse

Solution

Problem