Now, let's adjust our nav items so that the text of our links shares the same baseline as our logo.

In _navbar.less, find the selector .navbar-nav. It is the parent ul of our navbar items. Within this set of rules, you'll find nested media queries. (See the documentation on nested media queries at http://lesscss.org.) The relevant lines are given as follows:

// Uncollapse the nav
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    margin: 0;
    > li {
      float: left;
      > a {
        padding-top: ((@navbar-height - @line-height-computed) / 2);
        padding-bottom: ((@navbar-height - @line-height-computed) / 2);
      }
    }
  }

The variable @grid-float-breakpoint specifies the point at which the navbar expands to its full width or collapses to create the mobile-app-style responsive navigation. (You'll find this variable defined in _variables.less.)

At present, the padding-top and padding-bottom values are calculated to keep the text in the vertical center of the navbar. We want to increase the top padding and decrease the bottom padding. While we're at it, let's increase the horizontal padding on these nav items, and nudge the font size up a bit. I'll leave a trail by commenting out the original lines with single-line comments, and then adding my own new lines:

> a {
  // padding-top: ((@navbar-height - @line-height-computed) / 2);
  // padding-bottom: ((@navbar-height - @line-height-computed) / 2);
  padding: 30px 30px 14px;
  font-size: 18px;

Save, compile, and refresh to obtain the following result:

Feeling the power yet?

Now, let's add icon powers.