Utilizing Bootstrap 3.0 with dual navbars on a single page that adjust in height using the same variable for both .navbar blocks. Despite attempting to incorporate an additional class to alter the height of the initial navbar, it remains unaffected.
Check out this Bootply example for reference
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><a href="#">Site Tool Link</a></li>
<li><a href="#">Site Tool Link</a></li>
<li><a href="#">Site Tool Link</a></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">
<a href="http://www.google.com/" class="dropdown-toggle" data-toggle="dropdown">Menu #1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #3 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #4 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #5 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #6 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
.navbar {
border-radius: 0px;
}
.siteTools {
margin-bottom: 0px;
background-color:#cdcdcd;
border:none;
}