Houston Molinar Houston Molinar - 1 year ago 73
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download