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.

Answer 2

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 3

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

Answer 4

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.

Answer 5

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 :

Answer 6

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