Bootstrap 3 multi level menu - css

I'm having problems adding a hover on the root menus. All submenus show when hovering the first one. And it gets buggy in less than 768px. How do I fix this so hover works on the root menus and the submenus shows when window is smaller?
http://jsfiddle.net/e2xEL/1/
HTML
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="root">
Multi Level <b class="caret"></b>
<ul class="dropdown-menu">
<li>Level 1</li>
<li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Level 2</a>
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 3
</li>
<li>Level 3
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 4
</li>
<li>Level 4
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 5
</li>
<li>Level 5
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
</li>
<li>Level 2
</li>
</ul>
</li>
<li>Level 1</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
CSS:
.dropdown-submenu{
position:relative;
}
.dropdown-submenu > .dropdown-menu
{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu{
display:block;
}
.dropdown-submenu > a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover > a:after{
border-left-color:#ffffff;
}
.dropdown-submenu .pull-left{
float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
.root:hover .dropdown-menu{
display: block;
}

Updated DEMO
just add > in between .root:hover .dropdown-menu{
.root:hover > .dropdown-menu{
display: block;
}

Related

navbar dropdown menus display issue on mobile and small devices with media query

Not a big expert in CSS and responsiveness design, I try to collapse my navbar using a media query. The issue is that for dropdown menus, the responsive design is not applied correctl : The dropdown menus are displayed like on a large desktop device.
What I want is this :
Result Expected
But the result I obtain is this :
Current result
My code is actually the following :
<nav class="navbar navbar-default">
<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"> <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">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
And my media query is the current one as I found googling the web :
#media (max-width: 992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Additional info : The menu is displayed well when the viewport size is under 768px.
I guess, there is something missing on my media query for handling the dropdown menu case but I don't know what it is ? Can somebody help me ?
Thanks a lot.
here is your fiddle just remove default style dropdown
jsfiddle.net/qxgy6L9b/18/

Setting bootstrap nav breakpoint to show mobile nav on ipad portrait

Having trouble setting the breakpoint for bootstrap nav and sub-nav on iPad portrait and down. I need the navigation to show the mobile version on iPad portrait and iPhone portrait and landscape, but currently stuck with it showing desktop sub-nav on iPad portrait:
So it should appear like this on iPad portrait:
It works in the fiddle here: jsfiddle link, though the collapse doesn't happen until 768px. I can't get it to work, however, in my code.
HTML:
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
WHAT WE DO<span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-4 image-column">
<ul>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
</div>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header">LINK</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="dropdown-header spacer">LINK</li>
<li>Link & Link</li>
<li>Link & Link</li>
<li>Longer link title</li>
<li>Longer link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header">LINK</li>
<li>long link title</li>
<li>long link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Really long link title</li>
<li>Longer link title</li>
<li>Link title here</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
OUR RESULTS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>LINK</li>
<li>LINK</li>
</ul>
</li>
<li class="dropdown">NEWS</li>
<li class="dropdown">LOCATIONS</li>
<li class="dropdown">CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS:
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
.mega-dropdown-menu {
min-width: 800px;
}
#media (max-width: 967px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
.icon-bar{
background-color: #000;
}
}
WHAT I DID, I DIDN'T KNOW YOU WERE USING 4 COLUMNS NO MATTER WHAT SO I CHANGED THEM LG 4 XS 12 CHANGED THE MINWIDTH TO 750
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
WHAT WE DO<span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-md-4 col-xs-12 image-column">
<ul>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
</div>
</ul>
</li>
<li class="col-md-4 col-xs-12">
<ul>
<li class="dropdown-header">LINK</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="dropdown-header spacer">LINK</li>
<li>Link & Link</li>
<li>Link & Link</li>
<li>Longer link title</li>
<li>Longer link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
<li class="col-md-4 col-xs-12">
<ul>
<li class="dropdown-header">LINK</li>
<li>long link title</li>
<li>long link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Really long link title</li>
<li>Longer link title</li>
<li>Link title here</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
OUR RESULTS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>LINK</li>
<li>LINK</li>
</ul>
</li>
<li class="dropdown">NEWS</li>
<li class="dropdown">LOCATIONS</li>
<li class="dropdown">CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
.mega-dropdown-menu {
min-width:750px;
}
#media (max-width: 967px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
}
#media (max-width: 967px) {
.navbar-header {
float: none;
}
.mega-dropdown-menu ul{
display: block;
position: relative;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
I discovered the solution was to set a new breakpoint:
#media (max-width: 800px){
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
which brings the sub-nav on iPad portrait to the same as iPhone portrait.

Overriding Bootstrap dropdown style

I'm trying to extend this custom component example http://getbootstrap.com/examples/cover/ by adding appropriate style to dropdown element.
<li class="dropdown masthead-dropdown">
<a class="" data-toggle="dropdown" href="#">Media<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Videos</li>
<li>Pictures</li>
</ul>
</li>
CSS:
.masthead-dropdown{
background-color: transparent !important;
border-color:white !important;}
Custom styles are included after bootstrap.css, but they doesn't work.
Going by the Cover menu list, I used it to guess the part of your code since I don't know what is wrapping the <li>:
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li><ul class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Media
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Videos</li>
<li>Pictures</li>
</ul>
</ul></li>
</ul>
</nav>
</div>
</div>
Then add to your CSS:
.dropdown-toggle {
background-color: transparent;
border-color: #fff;
border-style: solid;
border-top: none;
border-right: none;
border-left: none;
}
And you can change the dropdown background colors with this:
.dropdown-menu{
background-color: #000;
}
And the links font color:
.dropdown-menu>li>a{
color: #fff;
}
JSFiddle

Bootstrap - Align content inside dropdown horizontally with a vertical separator between them

I want to implement this functionality:
.
Here is a fiddle of what I have so far: https://jsfiddle.net/vvevq2c3/
Below is the code I have tried without any luck:
ATTEMPT 1
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Personal
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<div class="row">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
<li>Separated link</li>
</div>
</ul>
</li>
</ul>
ATTEMPT 2
<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" role="button" aria-haspopup="true" aria-expanded="false">Personal
<span class="caret"></span>
</a>
<div class="row">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
<li>Separated link</li>
</ul>
</div>
</li>
</ul>
ATTEMPT 3
<div class="row">
<ul class="dropdown-menu">
<div class="span6">
<div class="mycontent-left">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</div>
</div>
<div class="span6">
<div class="mycontent-right">
<li>Separated link</li>
<li>One more separated link</li>
<li>Separated link</li>
</div>
</div>
</div>
</ul>
Does anyone have ideas on how to achieve this functionality?
UPDATE
With the help of the answers, I was able to align the dropdown menu content horizontally. Here is the modified code:
<!doctype html>
<html>
<head>
<title> Paypal </title>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel = "stylesheet" href = "../css/paypal.css">
<script src = "https://code.jquery.com/jquery-2.1.4.min.js"> </script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Paypal </a>
</div>
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown megamenu">
Personal <span class="caret"></span>
<div class="dropdown-menu row">
<ul class="list-unstyled col-lg-12 col-sm-12" role="menu">
<ul class="col-lg-4 col-sm-6 list-unstyled">
<li >Pay on eBay</li>
<li>Pay on websites</li>
</ul>
<ul class="col-lg-4 col-sm-6 list-unstyled">
<li>Pay in apps</li>
<li>Pay in stores</li>
</ul>
<ul class="col-lg-4 col-sm-6 list-unstyled">
<li>More ways to use us</li>
</ul>
</ul>
</div>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown megamenu">
Business <span class="caret"></span>
<div class="dropdown-menu row">
<ul class="list-unstyled col-lg-12 col-sm-12" role="menu">
<ul class="col-lg-4 col-sm-6 list-unstyled">
<li >All business solutions</li>
<li>Get paid on your website </li>
</ul>
<ul class="col-lg-4 col-sm-6 list-unstyled">
<li>Get oaid on the go </li>
<li>Get paid in your store </li>
</ul>
<ul class="col-lg-4 col-sm-6 list-unstyled">
<li>Get paid in your app </li>
<li>Email an invoice </li>
</ul>
</ul>
</div>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown megamenu">
Send <span class="caret"></span>
<div class="dropdown-menu row" class="col-lg-6">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Please enter your email or number">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</nav>
<script src = "../javascript/Paypal.js"> </script>
</body>
</html>
paypal.css
#media screen and (min-width: 768px) {
.megamenu ul {
padding-bottom:15px;
}
.megamenu ul:not(:last-of-type) {
border-right:1px solid #ccc;
}
.megamenu > .dropdown-menu {
min-width:800px;
}
.megamenu ul {
padding-bottom:15px;
}
}
ul {
margin-top: 0.5%;
}
#exampleInputEmail1 {
width : 50%;
margin-left: 3%;
margin-top: 2%;
}
.input-group {
width : 50%;
margin-left: 3%;
margin-bottom: 2%;
}
paypal.js
var paypal = (function ($) {
'use strict';
return {
stopPaypal : function () {
$('.dropdown-menu').on('click', function (e) {
e.stopPropagation();
});
}
};
}(jQuery));
paypal.stopPaypal();
You can try something like this using the Bootstrap col-* so that the menu UL's float left on larger screens...
http://codeply.com/go/QYaBcXNX7J
Also, your ATTEMPT 3 uses span3 which is not a Bootstrap 3 class.
This might help you get closer to what you're trying to accomplish.
.navbar-custom {
border-bottom: none;
}
.navbar-custom .navbar-nav > li > a,
.navbar-header a.navbar-brand {
color: #009cde;
}
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-header {
color: #009cde;
}
.navbar-custom .menu-large {
position: static;
}
.navbar-custom .megamenu {
padding: 20px 0px;
width: 100%;
}
.navbar-custom .megamenu > li > ul {
padding: 0;
margin: 0;
text-align: center;
}
.navbar-custom .megamenu > li > ul:not(:last-child) {
border-right: 1px solid #fff;
}
.navbar-custom .megamenu > li > ul > li {
list-style: none;
display: block;
}
.navbar-custom .megamenu > li > ul > li > a {
display: inline-block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #fff;
white-space: normal;
}
.navbar-custom .megamenu> li ul > li > a:hover,
.navbar-custom .megamenu> li ul > li > a:focus {
text-decoration: none;
color: #009cde;
background: #fff;
width: 100%;
}
.navbar-custom .nav > li.dropdown.open .dropdown-menu {
background: #009cde;
}
.navbar-custom .caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
.navbar-custom .navbar-toggle .icon-bar {
background: #266080;
}
#media (max-width: 768px) {
.navbar-custom .megamenu {
margin-left: 0;
margin-right: 0;
}
.navbar-custom .megamenu > li > ul > li > a {
padding: 6px 20px;
margin-bottom: 3px;
width: 100%;
}
.navbar-custom .megamenu > li > ul:not(:last-child) {
border-right: none;
}
.navbar-custom .megamenu > li > ul {
border: none;
margin: 10px auto;
text-align: left;
border-bottom: 1px solid #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-custom navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown menu-large "> Things <span class="caret"></span>
<ul class="dropdown-menu megamenu">
<li class="col-sm-12 ">
<ul class="col-sm-4">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
</ul>
<ul class="col-sm-4">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
</ul>
<ul class="col-sm-4">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="well">
<h1>Stuff</h1>
</div>

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

Using Bootstrap 3.0 with two navbars on the same page. The height variable will adjust both .navbar blocks. I've tried adding another class to override the height of the first navbar, but its left unaffected.
Bootply example
HTML:
<!-- Site Tools and Search Navbar -->
<div class="navbar siteTools">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
<button type="submit" class="btn btn-default btn-sm">Submit</button>
</form>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Site Tool Link</li>
<li>Site Tool Link</li>
<li>Site Tool Link</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Primary Navbar -->
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
Menu #1 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link #1</li>
<li>Link #2</li>
</ul>
</li>
<li class="dropdown">
Menu #2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link #1</li>
<li>Link #2</li>
</ul>
</li>
<li class="dropdown">
Menu #3 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link #1</li>
<li>Link #2</li>
</ul>
</li>
<li class="dropdown">
Menu #4 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link #1</li>
<li>Link #2</li>
</ul>
</li>
<li class="dropdown">
Menu #5 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link #1</li>
<li>Link #2</li>
</ul>
</li>
<li class="dropdown">
Menu #6 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link #1</li>
<li>Link #2</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
.navbar {
border-radius: 0px;
}
.siteTools {
margin-bottom: 0px;
background-color:#cdcdcd;
border:none;
}
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.
This should help you. min-height is blocking shrinking your element bellow its value.
.navbar {
border-radius: 0px;
}
div.siteTools.navbar {
height:35px;
min-height:35px;
margin-bottom: 0px;
background-color:#cdcdcd;
border:none;
}

Resources