Decreasing the height bootstrap navbar size without using less? - html

Question

I am trying to decrease the height of the Bootstrap 3.1.1's navbar without using the less version of it. I have tried several ways of doing this by reading around on different sites, and none of them are decreasing the CSS's .navbar height.
I have managed to fix the padding on the .navbar-nav > li > a.
My HTML:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">QuadCMS</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Help</li>
</ul>
</div>
</div>
</div>
My CSS which overrides the Bootstrap to try to fix the navbar.
.navbar {
height: 25px !important;
}
.navbar-nav > li > a {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
My main issue is with the actual height of the navbar, not the padding now. The padding of the navigation links are fixed and working at the small size. I have also tried changing the .navbar to .navbar-nav, and .navbar-fixed-top respectfully and nothing has worked yet.
Do I need to call a different CSS Class then the ones I have tried, or do I need to call two of the ones I have already tried to get the effect needed?

Answer 1

Here is the default .navbar styling:
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
You need to overwrite the min-height property. You can use the value inherit.
Example Here
.navbar {
height: 30px;
min-height: inherit;
}
.navbar-nav > li > a {
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-brand {
padding:5px 0 0 0;
}