Bootstrap dropdown: change the height of navbar?

Question

Why can't I change the height of the Bootstrap navbar, I don't the thick style on the navbar, so I changed it to height:20px !important; but it is still the same.

Any idea how I can change the navbar height?

css,

.el-menu {
    height:20px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid red;
}

.nav ul {
    -webkit-border-radius:0 !important;
    -moz-border-radius:0 !important;
    border-radius:0 !important;
}


.nav, .nav li, .nav a {
    margin:0 !important;
    padding:0 !important;
    border:1px solid blue;
}

html,

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top el-menu" role="navigation">
     
    <div class="navbar-collapse collapse">
        
      <ul class="nav navbar-nav">
          
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Template <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Add</a></li>
            <li><a href="#">Manage</a></li>
          </ul>
        </li>
        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Category <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">News</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Add</a></li>
                    <li><a href="#">Manage</a></li>
                </ul>
            </li>
            <li><a href="#">Blog</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Add</a></li>
                    <li><a href="#">Manage</a></li>
                </ul>
            </li>
          </ul>
        </li>
        
      </ul>
        
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Setting <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Comment</a></li>
                <li><a href="#">Design</a></li>
            </ul>
        </li>
        <li><a href="#">Logout</a></li>
      </ul>
        
        
    </div><!--/.nav-collapse -->
    
  
</div>

score 0 · Answer 1 · answered Feb 19 '14 at 17:26

You need to match the CSS selector exactly. I believe the Bootstrap class that sets the height is navbar, so that's the one you need to override in your site's CSS file.

Bootstrap CSS:

.navbar {
  position: relative;
  z-index: 1000;
  min-height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

Yours:

.navbar {
    min-height: 0;
    height: 20px;
}

Note that there might be other classes that set the height, which you can find using Firebug/developer mode in Firefox, Chrome, or IE, but the general principle is the same: override the default settings with your own. Be sure that you load your CSS file after the Bootstrap one so that your settings take precedence.

Bootstrap dropdown: change the height of navbar?

1 Answers1