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/

<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

score 14 · Answer 1 · edited Feb 29 '16 at 23:22

14

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

edited Feb 29 '16 at 23:22

Tony

9,672
3
47
75

answered Sep 04 '13 at 10:24

Carol Skelly

351,302
90
710
624

1

I 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. – heralight Sep 05 '13 at 15:17
@heralight I had to manually override the bootstrap dropdown styles for `.navbar-nav .open .dropdown-menu` and `.navbar-nav .open .dropdown-menu > li > a` – colllin Mar 10 '14 at 04:13
If you have multiple fixed links they stack on top of one another when collapsed. – Jon Aug 11 '15 at 11:33

score 12 · Accepted Answer · answered Sep 21 '13 at 22:14

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.

score 0 · Answer 3 · edited Mar 27 '14 at 07:52

The problem is with the point at which the navbar collapses. By default, Bootstrap collapses at 768px. If you increase this, your navbar will collapse sooner and your problem will disappear.

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

Hope this helps.

score 0 · Answer 4 · answered Sep 29 '16 at 13:38

I fixed it this way. Just right after the brand add two new lines with the same class and an 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, Item 1 and Item 2 remain in the navbar when resizing and the navbar won't break.

Twitter bootstrap 3 navbar navbar-right outside navbar-collapse

4 Answers4

Linked