Bootstrap 3 change navbar button height

Hidden picture Hidden · Aug 20, 2014 · Viewed 6.9k times · Source

I changed my navbar min-height from 40 to 55 to use a logo.

.navbar{
    position:relative;
    min-height:55px
}

I want to know how to change the height of my navbar buttons:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Navigation ein-/ausblenden</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://holdirbootstrap.de/examples/navbar-fixed-top/#"> <img src="images/logoverysmall.png">Company</a>       
    </div
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="dev.htm">Home</a></li>
        <li><a href="http://holdirbootstrap.de/examples/navbar-fixed-top/#ueber">Über uns</a></li>
        <li><a href="http://holdirbootstrap.de/examples/navbar-fixed-top/#kontakt">Product</a></li>

        <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">0<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
      </li>
      <li><a href="/kontakt">Kontakt</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
  </div>
 </div>

Answer

Victor picture Victor · Aug 20, 2014

Normally, In bootstrap they have already set navbar height. So if you want to modify the height use below code

  .navbar
   {
      position:relative;
      height:55px !important;
   }

Where you are writing a style for particular navbar add '!important' to all element because in runtime it will take only runtime css. So use '!important' word.