CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbartwitter-bootstrap-3
heralight
heralight

Reputation: 957

Twitter bootstrap 3 navbar navbar-right outside navbar-collapse

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

Upvotes: 10

Views: 52497

Answers (4)

Erhnam
Erhnam

Reputation: 921

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.

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362380

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

Upvotes: 14

RemusT
RemusT

Reputation: 166

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.

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49044

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.

Upvotes: 12

Related Questions