title: Prevent logo stretching in a navbar-brand on iPhone
body: <p>I have a <a href="http://www.atapgogreen.com" rel="nofollow"><code>navbar-brand</code> with a logo and button</a> and they stretch out when viewed on an iPhone while the menu is collapsed.</p>
  
  <p>How can I prevent this?</p>
  
  <pre><code>&lt;header id="header"&gt;
  
      &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="banner"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&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;a class="navbar-brand" href="index.html"&gt;&lt;img src="images/logo.png" alt="logo"&gt;&lt;/a&gt;
                  &lt;div class="slogan"&gt;&lt;p&gt;  PERTAMA DI INDONESIA : &lt;/p&gt;&lt;div class="slogs"&gt;Dengan Formula Plastik Baja&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="collapse navbar-collapse navbar-right"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="products.html"&gt;PRODUCTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="works.html"&gt;HOW IT WORKS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="projects.html"&gt;OUR PROJECTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!--/.container--&gt;
      &lt;/nav&gt;&lt;!--/nav--&gt;
  &lt;/header&gt;
  </code></pre>