Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of Navbar

Question

I'm new to the bootstrap framework.

Logo Increasing Height of NavBar:

In my navigation bar, I have inserted a logo that has a height of 50px. This obviously makes the navbar taller. I have not adjusted any CSS for this, it is simply the logo that is forcing the increased height.

Problem:

The links in the navbar are aligned to the top of the now taller navbar.

Goal:

I'd like the links vertically centered in the navbar as that will look much better.

My assumption was to play with line-height values or padding. However, that introduced the problem of still taking effect on mobile browsers (when it switches to the toggle menu) so my expanded menu ends up being way too tall that it looked silly.

Any insight is greatly appreciated?

My CSS is the default bootstrap CSS downloaded with the latest version 3.0.2.

Here is my HTML:

<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="My Logo"></span>
    </div>


    <div class="navbar-collapse collapse menu2">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>

It is those "Link 1", "Link 2", "Link 3" and "Link 4" links that are aligning to the top, when I really want them to be aligned vertically in the center.

score 95 · Accepted Answer · answered Nov 07 '13 at 23:22

95

add this to your stylesheet. line-height should match the height of your logo

.navbar-nav li a {
 line-height: 50px;
}

Check out the fiddle at: http://jsfiddle.net/nD4tW/

answered Nov 07 '13 at 23:22

Matt Lambert

3,655
2
24
17

4

Thanks for the suggestion @Matt Lambert. I kind of thought that as well. The problem with that method is that when you view it on a mobile (small screen) device, the line-height parameter makes the drop-down menu navigation way to tall. It ends up looking rather odd. So, on the desktop side of things it works, but any ideas on how it can behave nicely on the mobile side, too? – Robert Scott Nov 08 '13 at 03:15
2

yeah just overwrite the line-height value in your media query so it matches the correct height. Think that should work – Matt Lambert Nov 09 '13 at 00:52
2

This is why I hate Front-End work. Been at it for hours, and the solution was this simple. – Sheharyar Dec 07 '13 at 00:16
Hey, it keep me employed :) – Matt Lambert Dec 07 '13 at 05:23
hey, can you guys expand on the media queries extension please? I've put this in my stylesheet `.navbar-nav li a { line-height: 50px; } @media (max-width: @screen-xs-max) { .navbar-nav li a { line-height: 50px; } }` and I'm not sure why its not working. – Danny Rancher Dec 02 '14 at 16:42
Are you sure you're viewing at the right viewport size? I haven't tried this technique in bootstrap 3+ so it may need some tweaks – Matt Lambert Dec 02 '14 at 18:46
Another option (Works for Bootstrap 2) is to add a padding top: `.navbar .nav > li > a { padding-top: 15px; }` – Lisandro May 14 '16 at 21:54
The trouble with using media queries is that it doesn't cover a 3rd state the navbar can be in: the links are shown on a line below the brand image, but not collapsed. You could work out at what width that occurs and plug that into the media query, but is that width likely to be consistent across different browsers? – realh Jan 20 '17 at 22:20

score 9 · Answer 2 · answered Jul 16 '15 at 15:24

9

Matt's answer is fine, but just to avoid this to propagate to other elements inside the navbar (like when you also have a dropdown), use

.navbar-nav > li > a {
   line-height: 50px;
}

answered Jul 16 '15 at 15:24

Gabriel Udrea

91
1
3

score 3 · Answer 3 · answered Nov 07 '13 at 22:02

3

Use the Bootstrap Customizer to generate a version of Bootstrap that has a taller navbar. The value you want to change is @navbar-height in the Navbar section.

Inspect your current implementation to see how tall your navbar is with the 50px brand image, and use that calculated height in the Customizer.

answered Nov 07 '13 at 22:02

Ross Allen

43,772
14
97
95

Thanks for the suggestion @ssorallen. I was hoping to use just the default version of the download package and then make customizations to my custom CSS file. The other issue I have is that I ultimately need to have 2 navigation menus on the page, where one is short and the other one is tall (to accommodate the logo). So, I really need to know what CSS to target. – Robert Scott Nov 08 '13 at 03:11

score 2 · Answer 4 · edited Nov 05 '14 at 17:38

Bootstrap sets the height of the navbar automatically to 50px. The padding above and below links is set to 15px. I think that bootstrap is adding padding to your logo.

You can either remove some of the padding above and below your logo or you can add more padding above and below links.

Adding more padding should look something like this:

nav.navbar-inverse>li>a {
 padding-top: 25px;
 padding-bottom: 25px;
}

score 0 · Answer 5 · answered Jan 21 '17 at 13:59

I found that you don't necessarily need the text vertically centred, it also looks good near the bottom of the row, it's only when it's at the top (or above centre?) that it looks wrong. So I went with this to push the links to the bottom of the row:

.navbar-brand {
    min-height: 80px;
}

@media (min-width: 768px) {
    #navbar-collapse {
        position: absolute;
        bottom: 0px;
        left: 250px;
    }
}

My brand image is SVG and I used height: 50px; width: auto which makes it about 216px wide. It spilled out of its container vertically so I added the min-height: 80px; to make room for it plus bootstrap's 15px margins. Then I tweaked the navbar-collapse's left setting until it looked right.

score 0 · Answer 6 · answered Apr 14 '17 at 18:02

I actually ended up with something like this to allow for the navbar collapse.

@media (min-width: 768px) { //set this to wherever the navbar collapse executes
  .navbar-nav > li > a{
    line-height: 7em; //set this height to the height of the logo.
  }
}

Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of Navbar

6 Answers6

Linked