Decreasing height of bootstrap 3 0 navbar

Question

I am trying to decrease bootstrap 3 0 navbar height which is used with fixed top behavior  Here i am using code   HTML   lt div class  tnav  gt   lt div class  navbar navbar-fixed-top  role  banner  gt       lt div class  navbar-inner-sm  gt     lt div class  container  gt       lt div class  navbar-header  gt         lt button class  navbar-toggle  type  button  data-toggle  collapse  data-target   bs-navbar-collapse  gt           lt span class  sr-only  gt Toggle navigation lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt         lt  button gt       lt  div gt       lt nav class  collapse navbar-collapse  role  navigation  gt         lt ul class  nav navbar-nav pull-right  gt           lt li class  active  gt             lt a href     getting-started  gt Getting started lt  a gt           lt  li gt           lt li gt             lt a href     css  gt Ext01 lt  a gt           lt  li gt           lt li gt             lt a href     components  gt Language lt  a gt           lt  li gt           lt li gt             lt a href     javascript  gt My Account lt  a gt           lt  li gt           lt li gt             lt a href     customize  gt Sign Out lt  a gt           lt  li gt         lt  ul gt       lt  nav gt     lt  div gt       lt  div gt   lt  div gt      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  gt  li  display  block float  left    navbar-inner-sm  nav  gt  li  gt  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  gt  li  gt  a hover  background-color  transparent color   ffffff text-decoration  none    navbar-inner-sm  nav  active  gt  a  navbar  nav  active  gt  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    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

User · Answer

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

User · Answer

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  gt  li  gt  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     CSS      navbar     navbar-primary  navbar   background  9f58b5  border-bottom none     navbar-primary  navbar  nav  gt  li  gt  a  color   501762    navbar-primary  navbar  nav  gt  li  gt  a hover  color   fff  background-color   8e49a3    navbar-primary  navbar  nav  active  gt  a  navbar  nav  active  gt  a hover  color   fff  background-color   501762    navbar-primary  navbar  nav li  gt  a  caret   tnav  navbar  nav li  gt  a hover  caret  border-top-color   fff border-bottom-color   fff    navbar-primary  navbar  nav  gt  li dropdown open active  gt  a hover     navbar-primary  navbar  nav  gt  li dropdown open  gt  a  color   fff background-color   9f58b5 border-color   fff    navbar-primary  navbar  nav  gt  li dropdown open active  gt  a hover  caret   tnav  navbar  nav  gt  li dropdown open  gt  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  gt  li  gt  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  gt  li  gt  a    padding-top  0px  padding-bottom  0px  line-height  40px      Usage Code    lt div class  navbar-xs  gt      lt div class  navbar-primary  gt          lt nav class  navbar navbar-static-top  role  navigation  gt             lt  -- Brand and toggle get grouped for better mobile display -- gt             lt div class  navbar-header  gt                 lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   bs-example-navbar-collapse-8  gt                    lt span class  sr-only  gt Toggle navigation lt  span gt                    lt span class  icon-bar  gt  lt  span gt                    lt span class  icon-bar  gt  lt  span gt                    lt span class  icon-bar  gt  lt  span gt                 lt  button gt                 lt a class  navbar-brand  href     gt Brand lt  a gt             lt  div gt             lt  -- Collect the nav links  forms  and other content for toggling -- gt             lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-8  gt                 lt ul class  nav navbar-nav  gt                     lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt                     lt li gt  lt a href     gt Link lt  a gt  lt  li gt                      lt li gt  lt a href     gt Link lt  a gt  lt  li gt                 lt  ul gt             lt  div gt  lt  --   navbar-collapse -- gt         lt  nav gt     lt  div gt   lt  div gt

User · Answer

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

User · Answer

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  gt  li  gt  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

User · Answer

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

User · Answer

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  gt  li  gt  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

User · Answer

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

User · Answer

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  gt  li  gt  a  padding-top 10px  important  padding-bottom 10px  important    navbar  min-height 40px  important

User · Answer

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  gt  li  gt  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

[twitter-bootstrap] Decreasing height of bootstrap 3.0 navbar

Examples related to twitter-bootstrap

Examples related to navbar

Examples related to twitter-bootstrap-3