108

I am trying to decrease bootstrap 3.0 navbar height which is used with fixed top behavior. Here i am using code.

HTML

<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
    <div class="navbar-inner-sm">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav pull-right">
        <li class="active">
          <a href="../getting-started">Getting started</a>
        </li>
        <li>
          <a href="../css">Ext01</a>
        </li>
        <li>
          <a href="../components">Language</a>
        </li>
        <li>
          <a href="../javascript">My Account</a>
        </li>
        <li>
          <a href="../customize">Sign Out</a>
        </li>
      </ul>
    </nav>
  </div>
    </div>
</div>

CSS

.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);}
.navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;}
.navbar-inner-sm .nav.pull-right {float: right;}
.navbar-inner-sm .nav > li {display: block;float: left;}
.navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;}
.navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;}
.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;}
.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}

Result

enter image description here

From screen it shows, nav bar decreased in output but height doesn't decreased. original height is shown in pink color.

Above css script almost work well in bootstrap 2.*

Is there any way to decrease height properly.

3
  • No more need for <div class="navbar-inner"> in Bootstrap 3
    – Bartek S
    Oct 17, 2013 at 10:58
  • navbar-inner is my custom class. not related with bootstrap 3.0.
    – irfanmcsd
    Oct 17, 2013 at 20:37
  • The only way that worked for me is explained at this link: stackoverflow.com/questions/19576175/… It decreases navbar height with just two lines of code
    – giovannim
    Jan 16, 2014 at 11:48

9 Answers 9

125

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.

enter image description here

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>
8
  • 4
    this doesn't work... check my answer on this page... the min-height for .navbar is set to 50px by default, so if you set the height to 28px it will be overridden by the 50px min-height...
    – patrick
    Nov 2, 2013 at 0:04
  • 3
    Ah, I see this post was edited (a lot!) and now indeed shows the right code. I also see the min-height setting I suggested in my post here that for some reason got a down-vote. It's very frustrating to get downvoted on an answer that is correct, on-topic and clear...
    – patrick
    Feb 28, 2014 at 9:25
  • @patrick don't know what you mean, but at time my issue was resolved with my own answer. reputation have no question, if people give me vote up or down.
    – irfanmcsd
    May 17, 2014 at 17:00
  • 1
    Editing the source would've made this easier
    – Luke
    Jul 15, 2014 at 18:39
  • Funny, these didn't work for me. I had to override the fixed height of 50px;
    – Kevin
    Sep 18, 2014 at 22:10
43

Working solution:

Bootstrap 3.0 by default has a 15px padding on top and bottom, so we just need to override it!

For example:

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}
4
  • The default is 10px in bootstrap.css? .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; }
    – jichi
    Jan 11, 2014 at 21:10
  • 1
    Check out line number 3884 in bootstrap.css (v3.0.2). It's .navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;} by default.
    – Ranveer
    Jan 11, 2014 at 21:14
  • Not sure about v3.0.2. But in v3.0.3 line 4541 in bootstrap.css, it is: .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; }
    – jichi
    Jan 11, 2014 at 23:09
  • You, sir, are my hero.
    – orokusaki
    Apr 14, 2015 at 1:01
40

Simply override the min-height set in .navbar like so:

.navbar{
  min-height:20px; //* or whatever height you require
}

Altering an elements height to something smaller than the min-height won't make a difference...

9
  • as you see in navbar i already use height property but with no effect.
    – irfanmcsd
    Nov 2, 2013 at 14:30
  • it's the min-height property, not the height... if you set the height to a number lower than the min-height the min-height will prevent it from becoming smaller...
    – patrick
    Nov 5, 2013 at 9:14
  • 7
    Why does this get a downvote?? It's a working solution for the set problem in this post. Can a moderator look at this please, there seems to be a downvoter that simply downvotes stuff he doesn't agree with without checking the actual answer. A link posted further up 2.5 months after my post has the same answer, is on an external link, and got two upvotes. I hate it when people dilute SO with random downvotes!
    – patrick
    Feb 28, 2014 at 9:21
  • I often asked myself how people now they got a downvote, do you get a notification? Couldn't find this on meta Jun 27, 2014 at 12:22
  • 5
    no notification... seems people give downvotes if they think another answer is better or something... I don't know... In this case the guy asking the question took my answer in his own answer and accepted that answer... Kind of lame if you ask me... But then again, this site is not about ego, it's about helping others...
    – patrick
    Jun 28, 2014 at 11:19
27

if you are using the less source, there should be a variable for the navbar height in the variables.less file. If you are not using the source, then you can customize it using the customize utilty that bootstrap's site provides. And then you can downloaded it and include it in your project. The variable you are looking for is: @navbar-height

7
  • 1
    but i don't want to change original nav bar behaviour. i just change height for additional top nav bar.
    – irfanmcsd
    Sep 3, 2013 at 19:53
  • 2
    I think it's the best solution.
    – Imtiaz
    Oct 18, 2013 at 18:37
  • 1
    This is this best solution if you have only one nav on the site and it should be that height. If you have multiple navs, it gets a little harder, since .navbar-vertical-align is used in several places and has a hard reference to @navbar-height. May 1, 2014 at 17:22
  • nice solution. as long as you are not planning to use CDN
    – eagor
    Sep 2, 2014 at 18:08
  • 1
    As long as you use overrides in a seperate Less partial this is the best solution and should allow you to upgrade bootstrap without problems.
    – Ken Prince
    Apr 25, 2015 at 16:54
9

This is my experience

 .navbar { min-height:38px;   }
 .navbar .navbar-brand{ padding: 0 12px;font-size: 16px;line-height: 38px;height: 38px; }
 .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 38px; }
 .navbar .navbar-toggle {  margin-top: 3px; margin-bottom: 0px; padding: 8px 9px; }
 .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
 .navbar .navbar-collapse {border-color: #A40303;}

change height of navabr to 38px

2
  • Add this to take care of .navbar-form: .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
    – steph643
    Sep 10, 2014 at 16:03
  • Another extension: .navbar .navbar-text { margin-top: 0px; margin-bottom: 0px; line-height: 38px; }
    – cnmuc
    Jan 4, 2017 at 15:38
3

If you guys are generating your stylesheets with LESS/SASS and are importing Bootstrap there, I've found that overriding the @navbar-height variable lets your set the height of the navbar, which is originally defined in the variables.less file.

enter image description here

3

Wanted to added my 2 pence and a thank you to James Poulose for his original answer it was the only one that worked for my particular project (MVC 5 with the latest version of Bootstrap 3).

This is mostly aimed at beginners, for clarity and to make future edits easier I suggest you add a section at the bottom of your CSS file for your project for example I like to do this:

/* Bootstrap overrides */

.some-class-here {
}

Taking James Poulose's answer above I did this:

/* Bootstrap overrides */   
.navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; }

I changed the padding-top values to push the text down on my navbar element. You can pretty much override any Bootstrap element like this and its a good way of making changes without screwing up the Boostrap base classes because the last thing you want to do is make a change in there and then lose it when you updated Bootstrap!

Finally for even more separation I like to split up my CSS files and use @import declarations to import your sub-files into one main CSS File for easy management for example:

@import url('css/mysubcssfile.css');

note: if you're pulling in multiple files you need to make sure they load in the right order.

Hope this helps someone.

2

I think we can write this fewer styles, without changing the existing color. The following worked for me (in Bootstrap 3.2.0)

.navbar-nav > li > a { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 5px; padding-bottom: 10px; padding-left: 10px; }

The last one ('navbar-brand') is actually needed only if you have text as your 'brand' name.

1
  • Good answer this was the only one that worked for me with the latest version of Bootstrap 3 (a note: if you want to push your text down increase the padding-top value for .navbar-brand class as well as .navbar-nav > li > a classses.
    – Trevor
    Nov 20, 2016 at 11:43
0

I got the same problem, the height of my menu bar provided by bootstrap was too big, actually i downloaded some wrong bootstrap, finally get rid of it by downloading the orignal bootstrap from this site.. http://getbootstrap.com/2.3.2/ want to use bootstrap in yii( netbeans) follow this tutorial, https://www.youtube.com/watch?v=XH_qG8gphaw... The voice is not present but the steps are slow you can easily understand and implement them. Thanks

1
  • What in the code did you change to get the desired effect? If you point to a link in an answer, you should summarize the solution.
    – Brian
    Jul 10, 2015 at 17:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.