How to center navbar elements vertically (Twitter Bootstrap)?

Question

This is my CSS/LESS CSS code so far:

//make navbar taller
@navbarHeight: 60px;

//make navbar link text 18px
.navbar-inner {
    font-size: 18px;
}

//make n         


        

Answer 1

The .brand class uses a different line-height than the base text that is used throughout Bootstrap, as well as a few other key differences.

Relevant parts from the original bootstrap navbar LESS -

For .brand:

.brand {
  // Vertically center the text given $navbarHeight
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
  font-size: 20px;
  line-height: 1;
}

For links in the navbar:

.navbar .nav > li > a {
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
  line-height: 19px;
}

You'll probably need to play around with the values of @elementHeight, line-height, and maybe padding for the .navbar .nav > li > a selector to reflect the bigger 60px @navbarHeight (these default values are meant for a 40px @navbarHeight). Maybe try a 40px @elementHeight and/or a 29px line-height to start.