How to center navbar elements vertically (Twitter Bootstrap)?

Question

This is my CSS/LESS CSS code so far:

//make navbar taller
@navbarHeight: 60px;

//make navbar link text 18px
.navbar-inner {
    font-size: 18px;
}

//make navbar brand text 36px
.navbar .brand {
    font-size: 36px;
}

Which produces this:

enter image description here

FYI I'm using the Twitter Bootstrap demo code, I haven't altered the html (aside from changing the brand name).

As you can see, the brand name is centered vertically within the navbar like it should be, but the navigation links are not (they're bit higher towards the top). The problem only became apparent once I altered the height of the navbar. How can I get them to be centred vertically (like this website, for example)?

If it's any help, highlighting the elements in Chrome shows this:

enter image description here

add your code to http://www.jsfiddle.net – SVS Jul 10 '12 at 07:42 — SVS, Jul 10 '12 at 07:42

score 7 · Accepted Answer · answered Jul 11 '12 at 00:43

The .brand class uses a different line-height than the base text that is used throughout Bootstrap, as well as a few other key differences.

Relevant parts from the original bootstrap navbar LESS -

For .brand:

.brand {
  // Vertically center the text given $navbarHeight
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
  font-size: 20px;
  line-height: 1;
}

For links in the navbar:

.navbar .nav > li > a {
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
  line-height: 19px;
}

You'll probably need to play around with the values of @elementHeight, line-height, and maybe padding for the .navbar .nav > li > a selector to reflect the bigger 60px @navbarHeight (these default values are meant for a 40px @navbarHeight). Maybe try a 40px @elementHeight and/or a 29px line-height to start.

Thanks. Manipulating the `line-height` of `.navbar .nav > li > a` did the trick (changing `@elementHeight` seemed to have no effect). — XåpplI'-I0llwlg'I -, Jul 25 '12 at 03:21
.brand alone doesnt work. Bootstrap's ".nav .brand" overrides it. One has to insert ".nav .brand{ " and following your code, then only it will override bootstrap's original padding. — He Hui, Dec 07 '12 at 10:23
I use just line-height, similar to my logo height. It's working good :) Thanks — Codium, Mar 18 '16 at 20:33

score 0 · Answer 2 · edited Jul 11 '12 at 00:15

0

You can try this:

display: table-cell;

edited Jul 11 '12 at 00:15

Cyral

13,999
6
50
90

answered Jul 10 '12 at 08:27

Sllix

606
9
28

score 0 · Answer 3 · answered Jul 10 '12 at 10:25

0

If the above answer doesn't help, and you haven't touch the html, the only thing I can think of is the css. You might want to look at the css which the bootstrap example used and modify the sizes of .navbar-inner and .navbar .brand accordingly.

answered Jul 10 '12 at 10:25

consprice

722
3
11
21

score 0 · Answer 4 · answered Feb 18 '14 at 01:52

I've just had a similar issue with Bootstrap 3 but with the brand eliment. In the end I used the following css:

.navbar-brand {
  font-size: 3em;
  line-height: 1em;
}

My nav bar has increased in size due to a 50px image, with top and bottom margins of 10px. Not sure if that is of any help.

How to center navbar elements vertically (Twitter Bootstrap)?

4 Answers4

Linked