Harnish Kumar Harnish Kumar - 3 months ago 19
CSS Question

Reducing the height of the collapse bootstrap navigation bar

Is there any way to reduce the height of the navigation bar in this?
http://www.bootply.com/render/1dopQbJEMd. I am using exactly the same css properties in the link.I tried with the height property in css. But its not getting reduced.

Answer

after inspecting that code, i saw that

  1. .navbar has min-height:50px , change it to min-height:0 so it will inherit the height from it's contents

  2. .navbar-brand has padding:15px 15px, reduce the top and bottom padding how you want, for example padding:5px 15px

  3. .navbar-nav>li>a has padding-top:15px;padding-bottom:15px reduce them as well to 5px as you did on point 2

  4. .navbar-text has margin-top:15px;margin-bottom:15px , reduce it also to 5px as you did on point 2 and 3

in the end you will have CSS :

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

the height of your .navbar will be 30px, with 20px less than before