title: Bootstrap: Stretching navbar-toggle button in media query
body: <p>I have started making a simple website using Bootstrap.
  Everything works fine, but because I've put my logo in navbar-header , the button does quite funky when going under 407px (407 due to the logo size). </p>
  
  <p>Currently, it is like this (>407px wide):
  <a href="https://imgur.com/SIGRNqm,jH9zJji,Kwvbv98#0" rel="nofollow noreferrer">http://imgur.com/SIGRNqm,jH9zJji,Kwvbv98#0</a></p>
  
  <p>When under 407, it looks like this:
  <a href="https://imgur.com/SIGRNqm,jH9zJji,Kwvbv98#1" rel="nofollow noreferrer">http://imgur.com/SIGRNqm,jH9zJji,Kwvbv98#1</a></p>
  
  <p>I want it to look like this:
  (Click the previous link, replace #1 by #2, "I don't have enough reputation...")</p>
  
  <p>How would I go about doing this?</p>
  
  <p>Thanks! Please let me know if you want any further details.
  -Jack</p>
  
  <p>EDIT: This is the code that makes up the complete header:</p>
  
  <pre><code>&lt;div class="navbar-header" id="header"&gt;
      &lt;a href="//www.itsthejackpot.net" class="navbar-brand" id="logo"&gt;
          &lt;img src="/images/itsthejackpot.png" alt="itsthejackpot.net"&gt;
      &lt;/a&gt;
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar" id="button"&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;/div&gt;
  </code></pre>
  
  <p>I've seen many people complain about the use of <code>span</code> inside a <code>button</code>, but it works fine.</p>