twitter-bootstrap navbar-logo and collapsed menu issue on iPhone

Question

I am having issue with using bootstrap navbar with an image logo that overflows on the navbar. The issue is on the collapsed menu when opened on the iPhone. It looks something like this:

Here's the link to my site. Here's how I handle the image logo on the navbar:

<div class="navbar navbar-default navbar-fixed-top brandon-grotesque-bold">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>


    <a class="navbar-brand nav-title-logo" href="http://test.com/">  </a>

  </div>

  <div class="navbar-collapse in" id="navbar-collapse" style="height: auto;">
    <ul class="nav navbar-nav navbar-left">
      <li>
        <a href="/">
          Home
        </a>
      </li>
      <li>
        <a href="/tentang-kami">
          Apaan sih ni?
        </a>
      </li>
      <li>
        <a href="/cara-bergabung">
          Mau gabung?
        </a>
      </li>
      <li>
        <a href="/faq">
          Faq
        </a>
      </li><li>
      <a href="/contact">
        Contact Us
      </a>
    </li>
    </ul>

    <ul id="registerCart" class="nav navbar-nav navbar-right">
      <li>
        <a href="#" class="popup register">Register</a>
      </li>
      <li class="divider-vertical"></li>
      <li>
        <a href="#" class="popup signin">Login</a>
      </li>
    </ul>
  </div>
</div>

I am using a background image for the logo. Any ideas on how to fix this? It seems that when I remove: webkit-box-sizing: border-box; from bootstrap it works just fine. I am not sure if this is the way to go.

Answer 1

What about adding something like

.navbar-collapse {
    min-width: 100px;
}