Bootstrap Navbar link background height - html

Question

I have made my navbar taller in bootstrap using
.navbar {
padding-top: 15px;
padding-bottom: 15px;
}
However now the background of the active navbar link looks like this
How do I get the pictured grey background to span the full height of the navbar? I tried various things such as increasing the padding, and this does make it taller, but it doesn't actually extend over the purple, which is what I want.
Example here: http://jsfiddle.net/pjxd9cka/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap 3 Menu Generator
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<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>
</ul>
</li>
<li>
Components
</li>
<li>
JavaScript
</li>
<li class="active">
Customize
</li>
</ul>
</nav>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

The active element is what's producing the highlighted color, meaning you need to make the active element larger if you want it to grow.
One solution is to add your additional padding to the a elements inside the menu instead of to the outer menu container. Since bootstrap's default padding is 15px, you'll need to make it 15+15=30px top and bottom. It may also be different padding for different media screen sizes. Once you do this, in order to keep the navbar-header aligned, you'll need to add a margin to the top of that too.
.navbar {
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
background-color: teal;
}
.navbar-header {
margin-top: 15px;
}
.nav li a {
padding-top: 30px;
padding-bottom: 30px;
}
Here's a fiddle illustrating this.

Answer 2

A quick fix would be to add a negative margin to your links.
.navbar a {
margin-top: -15px;
margin-bottom: -15px;
Or perhaps a better method would be to change play with the height of the links.
.navbar a {
height: 100%;
margin-top: 0;
margin-bottom: 0;

Answer 3

I've redefined paddings and margins for three other classes instead of the .navbar class:
.navbar-brand
.navbar-toggle
.navbar-nav > li > a
Please check the result: http://jsfiddle.net/glebkema/hwk7kjmo/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar {
/*
padding-top: 15px;
padding-bottom: 15px;
*/
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-brand {
height: 80px; /* 50px by default */
padding-bottom: 30px; /* 15px by default */
padding-top: 30px;
}
.navbar-toggle {
margin-bottom: 20px; /* 8px by default */
margin-top: 20px;
padding-bottom: 12px; /* 9px by default */
padding-top: 12px;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-bottom: 30px; /* 15px by default */
padding-top: 30px;
}
}
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap 3 Menu Generator
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<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>
</ul>
</li>
<li>
Components
</li>
<li>
JavaScript
</li>
<li class="active">
Customize
</li>
</ul>
</nav>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>