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


        

Answer 1

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.