I've been attempting to reduce the height of Bootstrap 3.1.1's navbar without utilizing the less version. Despite trying various methods from different sources, I haven't been able to decrease the CSS's .navbar height.
However, I did manage to adjust the padding on .navbar-nav > li > a.
Below is 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"><a href="/">Home</a></li>
<li><a href="/support/">Help</a></li>
</ul>
</div>
</div>
</div>
Also, here is the CSS I used to override Bootstrap in an attempt to fix the navbar:
.navbar {
height: 25px !important;
}
.navbar-nav > li > a {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
The primary issue now lies with the actual height of the navbar itself, not just the padding. While the padding for the navigation links is fixed and working at the smaller size, changing the classes to .navbar-nav or .navbar-fixed-top, individually hasn't produced the desired effect.
I'm wondering if I ought to call a different CSS class than the ones attempted so far, or perhaps combine two of the existing ones to achieve the desired result?