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.

<divclass="navbar-header"><ahref="#"class="navbar-brand">BRAND1</a><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><ahref="#"class="navbar-brand pull-right hidden-lg hidden-md hidden-sm">BRAND23</a></div><ahref="#"class="navbar-brand pull-right hidden-xs">BRAND2</a><!-- Collect the nav links, forms, and other content for toggling --><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ulclass="nav navbar-nav"><li><ahref="#">Link1</a></li><li><ahref="#">Link2</a></li><li><ahref="#">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.