How to Decrease Navbar Height in Bootstrap 3

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.

Decreasing height of bootstrap 3.0 navbar

After spending few hours, adding the following css class fixed my issue.

Work with Bootstrap 3.0.*

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

Work with Bootstrap 3.3.4

.navbar-nav > li > a, .navbar-brand {
    padding-top:4px !important; 
    padding-bottom:0 !important;
    height: 28px;
}
.navbar {min-height:28px !important;}

Update
Complete code to customize and decrease height of navbar with screenshot.

Sample Image

CSS:

/* navbar */
.navbar-primary .navbar { background:#9f58b5; border-bottom:none; }
.navbar-primary .navbar .nav > li > a {color: #501762;}
.navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;}
.navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;}
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {}
.navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;}
.navbar-primary .navbar .navbar-brand {color:#fff;}
.navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;}
.navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 40px; }

Usage Code:

<div class="navbar-xs">
   <div class="navbar-primary">
       <nav class="navbar navbar-static-top" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                   <li><a href="#">Link</a></li>
              </ul>
          </div><!-- /.navbar-collapse -->
      </nav>
  </div>
</div>

How do you decrease navbar height in Bootstrap 4?

Decreasing the Navbar height is easier in Bootstrap 4 using the spacing utils. The height of the navbar comes from padding in the Navbar contents.

Just use py-0 in the nav-link and navbar-text..

<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link py-0">
                    <span class="icon icon18 icon-upload"></span> Input Data From Prior Month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0">
                    <span class="icon icon18 icon-excel-file"></span> Export to Excel
                </a>
            </li>
        </ul>
        <span class="navbar-text py-0 color-blue">
        *Data Automatically pulled from sources
      </span>
    </div>
</nav>

The py-0 class sets padding-top:0;padding-bottom:0 on the items.

Bootstrap 4 Navbar Shrink Height

Change navbar height in Bootstrap3

update

As per response on https://github.com/twbs/bootstrap/issues/11443 @mdo wrote:

Change the @navbar-height and @navbar-padding-vertical and you
should get it.

Example, set @navbar-height: 20px; and @navbar-padding-vertical: 0;, see: http://bootply.com/100604

Note this doesn't set the height of the .navbar-form elements

end update

The navbar itself has no defined width. Cause Bootstrap use the border-box model, the height is set by the highest element inside it.

Notice the navbar will have a min-height (set to 50px the default
navbar height). @navbar-height in navbar.less sets this min-height.

.navbar-brand

The .navbar-brand class got a height of 50px. Defined by a padding of
15px + a line-height of 20px;. (2 x 15 + 20 = 50).

The line-height is set in navbar.less too by @line-height-computed.
With @line-height-computed defined in variables.less as
floor(@font-size-base * @line-height-base); // ~20px

@line-height-computed will also used in forms, navigation, etc. so
changing it and recompile Bootstrap will not only effect your navbar.

The above make it impossible to set your navbar height with Less.

The padding is defined by navbar-padding-vertical but this variables is NOT used for setting the padding of the navbar links (.navbar-nav > li > a)

Use css to manipulate the line-height (so font-size) and padding of
.navbar-brand to change its height and so the height of the navbar.

.navbar-nav > li > a

The .navbar-nav > li > a class, the links in your navbar also defines
a height of 50px (padding of 15 bottom/top) and a line-height of 20x
again.
Note the padding is first set to 10px hard code in navbar.less and
overwritten by ((@navbar-height - @line-height-computed) / 2) (higher precedence) for @media (min-width: @grid-float-breakpoint)

Also in this case the line-height of the links will be set by
@line-height-computed.

Other elements

Also element like forms, dropdown will have a calculated height.

Overall it seems you will have to use css for the different elements
of your fixed navbar to sets it's height.

See also: https://github.com/twbs/bootstrap/issues/11443 and https://github.com/twbs/bootstrap/issues/11444

How to increase Bootstrap 3 Navbar height while keeping menu height small when collapsed

I finally developed a solution myself. You have to create a media query that keeps the line height of the collapsing menu at 20px for screen widths up to 767px. The following CSS in my style.css overrides the boostrap.css and solved my problem:

.navbar-fixed-top {
    min-height: 80px;
}

.navbar-nav > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 80px;
}

@media (max-width: 767px) {
    .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;}
}

Decreasing the height bootstrap navbar size without using less?

Here is the default .navbar styling:

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

You need to overwrite the min-height property. You can use the value inherit.

Example Here

.navbar {
    height: 30px;
    min-height: inherit;
}
.navbar-nav > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
}
.navbar-brand {
    padding:5px 0 0 0;
}

How to change in bootstrap navbar height?

.navbar {
    height: 100px !important; /*i assume your navbar size 100px*/
}

if you dealing with mobile

@media only screen and (min-width: 600px) {
   .navbar {
    height: 100px !important; 
   }
}
@media only screen and (min-width: 768px) {
   .navbar {
    height: 120px !important; 
  } 
}

reduce height of navbar in bootstrap 3

Hmm, looking at your code I noticed in your html that you are not including a stylesheet named bootstrap? So I am assuming that one of the two css files is the bootstrap and by the labeling common.css looks to be it. If this is the case reverse the order of the css files. You need to include the bootstrap.css (common.css?) file before trying to override any css styles.

.navbar {min-height:32px !important}

should work.

Try adding your own class

.navClass { height:32px !important; min-height:32px !important; }

If none of that works you can always go to the bootstrap website and edit the css to your liking and just change the navbar styles. http://getbootstrap.com/customize/#navbar <-- link to navbar styles just change that height property then download the package. Or if you know less you can just change the less files yourself and compile them again with whatever changes you want.

How can I change the navbar height in bootstrap?

Basically you need to add css height to navbar class.

 <style>
.navbar{ height: 48px;}
.navbar a{font-size:12px;}
</style>

Please check this codepane Demo

Change the color of Bootstrap navbar and reduce the height of navbar

The solution is to override the default css values coming from the bootstrap by your css values.

Here class navbar is controlling the minimum height and color background color of the navigation bar , So changing their css properties can solve your problem.

I have done this one :

.navbar{ background: red; max-height: 50px; }

Place the above css in your page , and it will work as you want .you can change the values as your demand.