Houston Molinar Houston Molinar - 4 months ago 13
CSS Question

Vertically centering nav items in Bootstrap 3

So, I've set my

navbar
to a custom height of
80px
, but now that makes my nav items not centered vertically. I've been searching for an answer to center them vertically in relation to their parent item for awhile now so I figured I'd give StackOverflow a shot.

Screenshot: http://screencast.com/t/zfUuX9SSQK

HTML:

<div class="container-fluid isModified">
<div class="row">
<nav class="navbar isModified" role="navigation">
<div class="col-lg-8 col-lg-offset-2">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar isModified"></span>
<span class="icon-bar isModified"></span>
<span class="icon-bar isModified"></span>
</button>
<a href="index.php" class="navbar-brand">Tickets</a>
</div>

<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav isModified">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div> <!-- end col-lg-12 -->
</nav>
</div> <!-- end row -->
</div> <!-- end container -->


CSS:

.navbar.isModified {
height: 80px;
border-radius: 0;
background-color: #cccccc;

}

.icon-bar.isModified {
background-color: #fff;

}

Answer

Vertical alignment can be done in a number of ways, as shown in this Stack Overflow question. However, they're fairly situational, meaning there isn't a single approach that can be applied to every case.

For the issue you're facing, I'd suggest the line-height approach, since all of your navigation content is on a single line. Just remove any vertical padding on the elements in questions, and set them to have the same line-height as the desired container height (80px):

.navbar-nav li a {
    padding:0 15px;
    line-height:80px;    
}
.navbar-header a {
    padding:0 15px;
    line-height:80px;    
}

Here's a Bootply to demonstrate. Hope this helps! Let me know if you have any questions.

Alternatively, you can use:

.navbar.isModified a {
    padding:0 15px;
    line-height:80px;    
}

Though you may find this too broad of a CSS selector if you plan on styling other links in your navbar differently.

Note: If you want the mobile version of the menu to look alright, you may need to use media queries to override these styles with more of your own.

Comments