[css] How do you decrease navbar height in Bootstrap 3?

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.

The answer above worked fine (MVC5 + Bootstrap 3.0), but the height returned to the default once the navbar button showed up (very small screen). Had to add the below in my .css to fix that as well.

.navbar-header .navbar-toggle {
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}

For Bootstrap 4
Some of the previous answers are not working for Bootstrap 4. To reduce the size of the navigation bar in this version, I suggest eliminating the padding like this.

.navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; }

You could try with other styles too.
The styles I found that define the total height of the navigation bar are:

• padding-top and padding-bottom are set to 0.5rem for .navbar.
• padding-top and padding-bottom are set to 0.5rem for .navbar-text.
• besides a line-height of 1.5rem inherited from the body.

Thus, in total the navigation bar is 3.5 times the root font size.

In my case, which I was using big font sizes; I redefined the ".navbar" class in my CSS file like this:

.navbar {
  padding-top:    0.25rem; /* 0px does not look good on small screens */
  padding-bottom: 0.25rem;
  font-size: smaller;      /* Just because I am using big size font */
  line-height: 1em;
}

Final comment, avoid using absolute values when playing with the previous styles. Use the units rem or em instead.

If you have only one nav and you want to change it, you should change your variables.less: @navbar-height (somewhere near line 265, I can't recall how many lines I added to mine).

This is referenced by the mixin .navbar-vertical-align, which is used for example to position the "toggle" element, anything with .navbar-form, .navbar-btn, and .navbar-text.

If you have two navbars and want them to be different heights, Minder Saini's answer may work well enough, when qualified further by an , e.g., #topnav.navbar but should be tested across multiple device widths.

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

Simply change the default 50px navbar-height by including this to your variable overrides.

You can find this default navbar-height on line 365 and 360 on bootstrap's SASS and LESS variables files respectively.

File location, SASS: bootstrap/assets/stylesheets/bootstrap/_variables.scss

File location, LESS: bootstrap/less/variable.less

 .navbar-nav > li > a {padding-top:7px !important; padding-bottom:7px !important;}
.navbar {min-height:32px !important;} 
.navbar-brand{padding-top:7px !important; max-height: 24px;  }
.navbar .navbar-toggle {  margin-top: 0px; margin-bottom: 0px; padding: 8px 9px; }

In Bootstrap 4

In my case I have just changed the .navbar min-height and the links font-size and it decreased the navbar.

For example:

.navbar{
    min-height:12px;
}
.navbar  a {
    font-size: 11.2px;
}

And this also worked for increasing the navbar height.

This also helps to change the navbar size when scrolling down the browser.

Instead of <nav class="navbar ... use <nav class="navbar navbar-xs...

and add these 3 line of css

.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }

Output :