title: Howto create a Bootstrap 3 navbar, whose entire.navbar-header is clickable on iOS 6/7?
body: <p>I took the vanilla Bootstrap3 Navbar Example: (<a href="http://getbootstrap.com/components/#navbar" rel="nofollow noreferrer">http://getbootstrap.com/components/#navbar</a>) and threw here: <a href="http://jsbin.com/UFoRIYex/727/edit" rel="nofollow noreferrer" title="JSBin">JSBin</a></p>
  
  <p>The one edit I made was to move the </p>
  
  <pre><code>data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
  </code></pre>
  
  <p>from the <strong><em>button.navbar-toggle</em></strong> to the <strong><em>div.navbar-header</em></strong></p>
  
  <p>The resulting div.navbar-header then looks like:</p>
  
  <pre><code>&lt;!-- Brand and toggle get grouped for better mobile display --&gt;
  &lt;div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
    &lt;button type="button" class="navbar-toggle"&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="#"&gt;Brand&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This has been working great on chrome/firefox, though I haven't tried any IE testing yet, but the desktop versions of it working don't really matter much, since the whole point is the navbar-header only gets shown on mobile devices. It works fine on my Android 4.4.2/Chrome 34.</p>
  
  <p>The problem I'm running into, is <em>only</em> the anchor tag (<em>a.navbar-brand</em>), and the button (<em>button.nav-bar-toggle</em>) are actually clickable on iOS (I tested on iOS 6.1 and 7.1).  </p>
  
  <p><img src="https://i.stack.imgur.com/VUGGe.png" alt="iOS Screenshot"></p>
  
  <p>Is there a more clever/reliable way to make the entire <strong><em>div.navbar-header</em></strong> clickable?</p>
  
  <p><strong><em>Edit</em></strong> This appears to be an iOS bug, and a work-around was simply to add "cursor: pointer" to the <strong><em>div.navbar-header</em></strong>  I have a full answer/example below.</p>