How do you decrease navbar height in Bootstrap 3?
bootstrap had 15px top padding and 15px bottom padding on .navbar-nav > li > a
so you need to decrease it by overriding it in your css file and .navbar
has min-height:50px;
decrease it as much you want.
for example
.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}
add these classes to your css and then check.
Minder Saini's example above almost works, but the .navbar-brand
needs to be reduced as well.
A working example (using it on my own site) with Bootstrap 3.3.4:
.navbar-nav > li > a, .navbar-brand {
padding-top:5px !important; padding-bottom:0 !important;
height: 30px;
}
.navbar {min-height:30px !important;}
Edit for Mobile... To make this example work on mobile as well, you have to change the styling of the navbar toggle like so
.navbar-toggle {
padding: 0 0;
margin-top: 7px;
margin-bottom: 0;
}