Adjusting nav item padding
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...