Vertical align Bootstrap navigation button

Question

I am toying around with Bootstrap and responsive website design. I have a custom navbar (which height is fixed 100px) and when I try to collapse it, the toggle button is not vertically aligned.

CSS :

.navbar {
  border : none;
  border-radius: 0;
  margin-bottom: 0;
}

.navbar-default {
  background-color: white;
}

.navbar-brand, .navbar-nav li a {
  line-height: 100px;
  height: 100px;
  padding-top: 0;
  margin-left: 30px;

  font-family: 'pacifico', cursive;
  font-size: 1.4em;
}

.navbar-brand img {
  width: auto;
  height: 100px;
}

And HTML :

    <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/app">
          <img src="img/brand.png">
        </a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
      </div>
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav">
          <li><a href="#/home">Home</a></li>
          <li><a href="#/tattoos">Tattoos</a></li>
          <li><a href="#/art">Art</a></li>
          <li><a href="#/life">Life with Mr.Rime</a></li>
        </ul>
      </div>
    </div>
  </nav>

Can somebody help ?

Answer 1

This may not be the most "elegant" solution, but since your nav bar will always be a fixed height of 100 pixels, you could simply adjust the margin-top value of the navbar-toggle class.

It looks like your "hamburger" button is 34 pixels in height, so you would just need to add the following to your CSS file:

.navbar-toggle {
    margin-top: 33px;
}