Vertically centering nav items in Bootstrap 3

Question

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;

}

You wants height of links as `80px` as well? Or just keep current height but vertically middle aligned? — Mohammad Usman, Jul 27 '16 at 15:25
Keep current height of the navbar (80px) but have the links inside of it centered vertically where they are even space from the top and bottom. — Houston Molinar, Jul 27 '16 at 15:28

score 4 · Accepted Answer · edited May 23 '17 at 12:09

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.

Great, I'm glad I could help out! – Serlite Jul 27 '16 at 15:32 — Serlite, Jul 27 '16 at 15:32

score 0 · Answer 2 · answered Jul 27 '16 at 15:31

You can do this several ways depending on how your nav links need to behave. You probably want to apply line-height to you links so on hover they are still the full height of the navbar above 768px (or not, depends). You can then use another media and add padding to the navbar-header class to have a taller navbar. Don't use a fixed height though because on mobile your toggle nav will have no background color since the navbar has a default value of min-height: 50px.

Working Example:

.navbar.isModified {
  background-color: #cccccc;
}
.navbar.isModified .icon-bar {
  background-color: #fff;
}
@media (min-width: 768px) {
  .navbar.isModified .navbar-brand {
    line-height: 50px;
  }
  .navbar.isModified .navbar-nav > li > a {
    line-height: 50px;
  }
}
@media (max-width: 767px) {
  .navbar.isModified .navbar-header {
    padding: 15px 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <nav class="navbar navbar-static-top 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"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></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">
            <li><a href="#">Link 1</a>
            </li>
            <li><a href="#">Link 2</a>
            </li>
            <li><a href="#">Link 3</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Vertically centering nav items in Bootstrap 3

2 Answers2