Bootstrap 3 Navbar -- issues with the collapsing property of the navbar

Question

So I am running Bootstrap 3, and am trying to include an image (a logo) inside my navbar; furthermore, I want to vertically center my navbar links relative to the navbar. I have this code for my header/navbar:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href= <%= root_path %>> <img src=<%= asset_path("akpsi_bw_200.png")%> alt="" />   </a>
...
...

and these styles:

.brand {
  height:40px;
  width:40px;
}

.navbar-inner li a {
 line-height: 40px;
}

and that's fine, and it works, producing this:

However, two things go wrong when I shrink the window:

1) The button to expand the header links is not aligned vertically. How do I center it? (I also want to make the button smaller, how do I do this as well?)

2) When I expand the links, the line-height: 40px; is still in effect, and thus spaces out all of my links, which looks bad. How do I override this line-height? An illustration of this is below:

Thanks!

Answer 1

For both of the above you can use media queries to fix the problem.

For example, for resolutions under 768px where the navbar usually shrinks use:

@media (max-width:768px) {
.brand {
margin-top:XXpx;
}
.navbar-inner li a {
line-height:20px;
}
}