How do you decrease navbar height in Bootstrap 3?

Question

I want to make my navbar in BS3 to be of height 20px. How do I do this?

I've tried the following:

.tnav .navbar .container { height: 28px; } 

Did nothing.

.navbar-fixed-top {     height: 25px; /* Whatever you want. */ } 

Appears to be able to increase the size of the bar, but cannot decrease.

What is a good way to do this while preserving the container's alignment, etc.

Answer 1

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.

Answer 2

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; }