Custom height Bootstrap's navbar

Question

I want a header with a height of 150px which contains a navbar. The navbar should be vertically centered in the header.

HTML:

<header>     <div class="navbar navbar-static-top">         <div class="navbar-inner">             <div class="container" style="background:yellow;">                 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                     <span class="icon-th-list"></span>                 </a>                 <a href="/"><img src="img/logo.png" class="logo" /></a>                 <nav class="nav-collapse collapse pull-right" style="line-height:150px; height:150px;">                               <ul class="nav" style="display:inline-block;">                         <li><a href="">Portfolio</a></li>                         <li><a href="">Blog</a></li>                         <li><a href="">Contact</a></li>                     </ul>                 </nav>             </div>         </div>     </div> </header> 

CSS:

header {     width: 100%;     line-height: 150px;     color:red;     height: 150px;      .navbar-inner {         border:0;         border-radius: 0;         background: blue;         padding:0;         margin:0;         height: inherit;     } } 

The nav/menu/vertical list is now in the top right of the header. How do I get it to center vertically? bootstrap.css is uncustomized.

Answer 1

your markup was a bit messed up. Here's the styles you need and proper html

CSS:

.navbar-brand, .navbar-nav li a {     line-height: 150px;     height: 150px;     padding-top: 0; } 

HTML:

<nav class="navbar navbar-default">     <div class="navbar-header">         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">             <span class="sr-only">Toggle navigation</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>         </button>          <a class="navbar-brand" href="#"><img src="img/logo.png" /></a>     </div>      <div class="collapse navbar-collapse">         <ul class="nav navbar-nav">             <li><a href="">Portfolio</a></li>             <li><a href="">Blog</a></li>             <li><a href="">Contact</a></li>         </ul>     </div> </nav> 

Or check out the fiddle at: http://jsfiddle.net/TP5V8/1/

Answer 2

You need also to set .min-height: 0px; please see bellow:

.navbar-inner {     min-height: 0px; }  .navbar-brand, .navbar-nav li a {     line-height: 150px;     height: 150px;     padding-top: 0; } 

If you set .min-height: 0px; then you can choose any height you want!

Good Luck!