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    lt  -- Begin NavBar -- gt   lt div class  navbar navbar-inverse navbar-static-top  role  navigation  gt     lt div class  container  gt       lt div class  navbar-header  gt         lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   menu2  gt           lt span class  sr-only  gt Toggle navigation lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt         lt  button gt         lt span class  navbar-brand  href     gt  lt img src  img logo png  width  210  height  50  alt  My Logo  gt  lt  span gt       lt  div gt         lt div class  navbar-collapse collapse menu2  gt          lt ul class  nav navbar-nav navbar-right  gt           lt li gt  lt a href     gt Link 1 lt  a gt  lt  li gt           lt li gt  lt a href     gt Link 2 lt  a gt  lt  li gt           lt li gt  lt a href     gt Link 3 lt  a gt  lt  li gt           lt li gt  lt a href     gt Link 4 lt  a gt  lt  li gt         lt  ul gt        lt  div gt  lt  --  nav-collapse -- gt     lt  div gt   lt  div gt    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

User · Answer

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.

User · Answer

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 gt li gt a    padding-top  25px   padding-bottom  25px

User · Answer

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  gt  li  gt  a      line-height  7em    set this height to the height of the logo

User · Answer

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

User · Answer

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

User · Answer

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  gt  li  gt  a      line-height  50px

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

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3