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.
Post a Comment for "Bootstrap Navbar With 2 Brands To The Left And Right With Centered Links"