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.

madth3
  • 7,275
  • 12
  • 50
  • 74
irfanmcsd
  • 6,533
  • 7
  • 38
  • 53

9 Answers9

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>
irfanmcsd
  • 6,533
  • 7
  • 38
  • 53
  • 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 02 '13 at 00: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 '14 at 09: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 '14 at 17:00
  • 1
    Editing the source would've made this easier – Luke Jul 15 '14 at 18:39
  • Funny, these didn't work for me. I had to override the fixed height of 50px; – Kevin Sep 18 '14 at 22:10
  • Well done. It's working and easy to modificate. Thanks. – Marek Bar Sep 24 '14 at 10:03
  • This does not work using bootstrap 3.3.1 js and css with no theme... Not sure about other versions or effects of themes. – carter Nov 18 '14 at 20:55
  • This answer doesn't work at all, should not be accepted as the answer atleast. this one works perfectly with latest Bootstrap vesion http://stackoverflow.com/a/29285935/2545197 – Abhinay May 07 '15 at 17:23
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}
Ranveer
  • 6,683
  • 8
  • 45
  • 92
  • The default is 10px in bootstrap.css? .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; } – jichi Jan 11 '14 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 '14 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 '14 at 23:09
  • You, sir, are my hero. – orokusaki Apr 14 '15 at 01: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...

patrick
  • 11,519
  • 8
  • 71
  • 80
  • as you see in navbar i already use height property but with no effect. – irfanmcsd Nov 02 '13 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 05 '13 at 09: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 '14 at 09:21
  • I often asked myself how people now they got a downvote, do you get a notification? Couldn't find this on meta – Iulian Onofrei Jun 27 '14 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 '14 at 11:19
  • @lulian, click on the total number of votes, you'll see the split between up- and downvotes – patrick Feb 08 '16 at 14:33
  • @Mirko, yes it does, I use it all the time. In your case you might have another CSS somewhere that overrides the min-height. This is something you can examine with the dev tools of your browser. If this is the case you can add '!important' (so: min-height:20px!important;) to your CSS. If the other code already uses !important it will not have an effect... but the code above works – patrick Nov 23 '16 at 15:42
  • @patrick, here is a jsfiddle with the html of the question and your css solution, but t does not work: https://jsfiddle.net/9Lohmv6b/ – Mirko Nov 24 '16 at 11:59
  • @Mirko... you also need to actually set the height of the navbar... The answer I posted was what to add to make the OP's code work... Without setting the actual height of the nav-bar changing the min-height doesn't have any effect at all. Here's the updated jsFiddle that sets the height: https://jsfiddle.net/9Lohmv6b/1/ – patrick Nov 24 '16 at 16:15
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

AJ Meyghani
  • 4,389
  • 1
  • 31
  • 35
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

Hoàng Vũ Tgtt
  • 1,863
  • 24
  • 8
  • Add this to take care of .navbar-form: `.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }` – steph643 Sep 10 '14 at 16:03
  • Another extension: .navbar .navbar-text { margin-top: 0px; margin-bottom: 0px; line-height: 38px; } – cnmuc Jan 04 '17 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.

Trevor
  • 1,561
  • 1
  • 20
  • 28
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.

James Poulose
  • 3,569
  • 2
  • 34
  • 39
  • 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 '16 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

Usman Iqbal
  • 2,379
  • 5
  • 26
  • 50
  • 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 '15 at 17:30