css - Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of Navbar

Question

I'm new to the bootstrap framework.

Logo Increasing Height of NavBar:

In my navigation bar, I have inserted a logo that has a height of 50px. This obviously makes the navbar taller. I have not adjusted any CSS for this, it is simply the logo that is forcing the increased height.

Problem:

The links in the navbar are aligned to the top of the now taller navbar.

Goal:

I'd like the links vertically centered in the navbar as that will look much better.

---

My assumption was to play with line-height values or padding. However, that introduced the problem of still taking effect on mobile browsers (when it switches to the toggle menu) so my expanded menu ends up being way too tall that it looked silly.

Any insight is greatly appreciated?

My CSS is the default bootstrap CSS downloaded with the latest version 3.0.2.

Here is my HTML:

<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="My Logo"></span>
    </div>


    <div class="navbar-collapse collapse menu2">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>

It is those "Link 1", "Link 2", "Link 3" and "Link 4" links that are aligning to the top, when I really want them to be aligned vertically in the center.

Answer 1

add this to your stylesheet. line-height should match the height of your logo

.navbar-nav li a {
 line-height: 50px;
}

Check out the fiddle at: http://jsfiddle.net/nD4tW/