Question

I’m having difficulty centering my navigation elements vertically within the navbar in Boostrap 2.0. Right now, all the elements are flushed to the top of the navbar. How do I fix this?

I’m also having a hard time keeping the logo and navbar lined up with the page boundaries. If you notice, the brand and navbar float to the edges of the browser page. How do I fix this?

I want the navbar/header to have this layout:

http://www.fleetio.com/

Here’s my attempt, use the plus to see the code:
http://jsfiddle.net/tYVcY/36/embedded/result/

Answer 1

The way Fleetio handles the vertical alignment issue is to modify the padding on the .navbar .nav > li > a selector.

Standard Bootstrap:

.navbar .nav > li > a {
  float: none;
  padding: 10px 15px 10px;
  color: #777;
  text-decoration: none;
  text-shadow: 0 1px 0 white;
}

Fleetio (note the padding increase):

.navbar .nav > li > a {
  float: none;
  padding: 20px 15px 20px;
  color: #555;
  text-decoration: none;
  text-shadow: 0 1px 0 white;
}

To address the navbar stretching to the edges of the browser window horizontally, wrap the navbar within a container (i.e., <div class="container"></div>).