Multiple Navbars on The Same Page with Twitter's Bootstrap 3

Multiple navbars on the same page with Twitter's Bootstrap 3

Although navbars are meant for singular use you are free to use more as one navbar per page. Multiple navbars on the same page will have the same z-index (1000) so dropdowns may overlap. When using more navbars give each an different z-index (and id). The second z-index should to be lower than the first one, etc.

B.e. with having navbars like:
<nav id="navbar1" class="navbar" role="navigation">
<nav id="navbar2" class="navbar" role="navigation">
<nav id="navbar3" class="navbar" role="navigation">
<nav id="navbar4" class="navbar" role="navigation">

set the z-indexes by:

#navbar2 {z-index:999;}
#navbar3 {z-index:998;}
#navbar4 {z-index:997;}

How to show multiple Twitter Bootstrap navbar's on the same page?

Sure you can have 2 navbars. You may have to tweak the code to get it the way you want...

Working Example

<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Brand</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>

Multiple fixed top navbar headers in Twitter Bootstrap 3

The code below is a basic start using two navbars and affix.

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="divide-nav">
<div class="container">
<p class="divide-text">Some Text Here</p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="filler"></div>
</div>
</div>

CSS

body{
margin-top: 50px;
}

.divide-nav{
height: 50px;
background-color: #428bca;
}

.divide-text{
color:#fff;
line-height: 20px;
font-size:20px;
padding: 15px 0;
}

.affix {
top: 50px;
width:100%;
}

.filler{
min-height: 2000px;
}

.navbar-form {
padding-left: 0;
}

.navbar-collapse{
padding-left:0;
}

JavaScript

$('.navbar-lower').affix({
offset: {top: 50}
});

How can i have multiple Navbars in a page

You have to remove navbar-fixed-top from the second nav

html would be like this

    <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">

<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>

<div class="container">

<h1>Conent</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>

</div> <!-- /container -->
<div class="navbar ">
<div class="navbar-inner">
<div class="container">

<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>

in bootply

Multiple fixed top navbar headers in Twitter Bootstrap 3 not working properly?

You used navbar-static-top for your second navbar. You have to use navbar-fixed-top for both navbars so they stay at the top of the page when you scroll. You will also have to add some space (equal to the height of the first navbar) from the top for the second navbar (equal to the height of the first navbar) to avoid overlapping, like this: top:50px;
Here is an update of your code on Bootply: http://www.bootply.com/Xd04ROsODx

How to do 2 navbars in bootstrap 3 in single page responsive

As you can see here

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

The data-target is #bs-example-navbar-collapse-1
and the 2nd navbar id which is the target must be the same #bs-example-navbar-collapse-1

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">

But you made it bs-example-navbar-collapse-2 so to fix it just change number 2 to number 1 and the code is fixed.

<nav class="navbar nav-bar-default" id="memberNavInfo">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<!-- 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 class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>

<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

And that the problem in your code which need to be fixed, But as i understand your qestion is how to make multilevel dropdown menu with the same style, Please check this answer https://stackoverflow.com/a/22484486/7273097

Multiple navbars with burger menus on 1 page

target="#navbar_main" as id="navbar_main" to work fine in mobile dives work on id base.

see the demo

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top" id="topnavbar"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top_navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="top_navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li> <a href="#">My Dashboard</a> </li> <li> <a href="#">Our Services</a> </li> <li> <a href="#">Menu 2</a> </li> <li> <a href="#">My Account</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Welcome John</a></li> </ul> </div> </div></nav>
<nav class="navbar navbar-default" id="midnavbar"><div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_main" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse" id="navbar_main"> <ul class="nav navbar-nav"> <li> <a href="#">My<br />Favourites</a> </li> <li> <a href="#">Active<br />Funds</a> </li> <li> <a href="#">Passive<br />Funds</a> </li> <li> <a href="#">JJ<br />Funds</a> </li> <li> <a href="#">Fund<br />Ranges</a> </li> <li> <a href="#">Model<br />Portfolios</a> </li> <li> <a href="#">Sector<br />Factsheets</a> </li> <li> <a href="#">Show<br />All</a> </li> </ul>
<ul class="nav navbar-nav navbar-right"> <li> <form class="navbar-form"> <button type="submit" class="btn btn-default btnsearch"><i class="glyphicon icon-search"></i></button> </form> </li> </ul> </div></div>

How can I have two Bootstrap navbars on the same page of different heights?

I know the other answer has already been marked correct, but I don't think that specifying a height is the correct way to fix this.

Even if you override the default min-height and set it to 0, the menu is still tall, and that's because of the padding and margins of the elements inside that navbar. By explicitly setting height: 35px you'll be cutting of the content inside the navbar at 35px. This looks bad and is not great for anyone wanting bigger font sizes etc.

I think you should adjust the elements inside the navbar instead like this:

.siteTools {
min-height:0;
margin-bottom: 0px;
background-color:#cdcdcd;
border:none;
}

.siteTools .nav > li > a {
padding: 7px 10px;
font-size: 12px;
}

.siteTools form[role="search"] {
margin: 4px 0;
}

.siteTools form[role="search"] input {
padding: 3px 5px;
height: 25px;
}

.siteTools form[role="search"] button[type="submit"] {
padding: 3px 5px;
height: 25px;
}

Working demo here.

Write Twitter Bootstrap navbar once for multiple pages

If you use grunt in your project, you also can use grunt-bake for html templates.
You can create navbar.html and include this in any html file like that:

<!--(bake includes/navbar.html)-->


Related Topics



Leave a reply



Submit