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      Did nothing    navbar-fixed-top       height  25px     Whatever you want         Appears to be able to increase the size of the bar  but cannot decrease   What is a good way to do this while preserving the container s alignment  etc

User · Answer

navbar-nav  gt  li  gt  a  padding-top 7px  important  padding-bottom 7px  important    navbar  min-height 32px  important     navbar-brand padding-top 7px  important  max-height  24px      navbar  navbar-toggle    margin-top  0px  margin-bottom  0px  padding  8px 9px

User · Answer

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

User · Answer

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

User · Answer

Simply change the default 50px navbar-height by including this to your variable overrides   You can find this default navbar-height on line 365 and 360 on bootstrap s SASS and LESS variables files respectively   File location  SASS  bootstrap assets stylesheets bootstrap  variables scss  File location  LESS  bootstrap less variable less

User · Answer

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

User · Answer

Instead of  lt nav class  navbar     use  lt 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  gt  li  gt  a    padding-top  0px  padding-bottom  0px  line-height  28px      Output

User · Answer

bootstrap had 15px top padding and 15px bottom padding on  navbar-nav  gt  li  gt  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  gt  li  gt  a  padding-top 5px  important  padding-bottom 5px  important    navbar  min-height 32px  important    add these classes to your css and then check

User · Answer

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

User · Answer

In Bootstrap 4  In my case I have just changed the  navbar min-height and the links font-size and it decreased the navbar    For example    navbar      min-height 12px     navbar  a       font-size  11 2px      And this also worked for increasing the navbar height    This also helps to change the navbar size when scrolling down the browser

[css] How do you decrease navbar height in Bootstrap 3?

Examples related to css

Examples related to twitter-bootstrap