Bootstrap Navbar With 2 Brands To The Left And Right With Centered Links

I want to create a navbar that looks like: [BRAND1] ... [LINK1 | LINK2 | LINK3] ... [BRAND2] this is what I get, but the collapsed menu looks weird and is missing the border betwee

Solution 1:

You need to clear the floated elements, add this on your CSS:

/* navbar menu when collapsed */
@media (max-width: 767px) {
  .navbar-collapse {
     clear:both;
  }
}

Check TheDemo

Solution 2:

If you for some reason cant change the CSS like @Danko suggests then you could stick with the bootstrap classes provided and just duplicate brand2 element for mobile and desktop.

The hidden-* css classes within bootstrap allow you to do this with no additional CSS markup.

<div class="navbar-header">
        <a href="#" class="navbar-brand">BRAND1</a>

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

      <a href="#" class="navbar-brand pull-right hidden-lg hidden-md hidden-sm">BRAND23</a>
    </div>

  <a href="#" class="navbar-brand pull-right hidden-xs">BRAND2</a>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
        </ul>
    </div>

Example at http://www.bootply.com/Qf9w7wNK6t

You can read more on the Bootstrap Docs - http://getbootstrap.com/css/#responsive-utilities

Personally I would use the clear:both method suggested.