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
How Is The Screen Size Measured for Media Queries
Shiny Presentation (iOSlides): Custom CSS and Logo Windows 7/8
Display Inline-Block Not Growing Horizontally with Child Having Padding in Per Cent
How to Select The 1St and Then Every 4Th Row in a HTML-Table with Nth-Child()-Selector
Bootstrap Align Columns of Different Height
CSS Background Image Not Appearing in Safari
Facebook/Twitter Style Photos Grid Style Layout
Remove Row Lines in Twitter Bootstrap
How Does Google Do The Barrel Roll
How to Combine Position: Relative and Float: Left
Understanding Margin-Collpasing
Tell Less to Not Freak Out in Certain Special Cases and Ignore Weird Characters
Why Bootstrap CSS Is Not Overriding in Other Project with The Same Code
How to Display Entire Option Value When Hovered in Mat-Autocomplete
How to Keep Mat-Datepicker Calender Open, Even After Selecting a Date from Calendar