CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
ericpeters
ericpeters

Reputation: 417

Howto create a Bootstrap 3 navbar, whose entire.navbar-header is clickable on iOS 6/7?

I took the vanilla Bootstrap3 Navbar Example: (http://getbootstrap.com/components/#navbar) and threw here: JSBin

The one edit I made was to move the 

data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"

from the button.navbar-toggle to the div.navbar-header

The resulting div.navbar-header then looks like:

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  <button type="button" class="navbar-toggle">
    <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" href="#">Brand</a>
</div>

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.

The problem I'm running into, is only the anchor tag (a.navbar-brand), and the button (button.nav-bar-toggle) are actually clickable on iOS (I tested on iOS 6.1 and 7.1).

iOS Screenshot

Is there a more clever/reliable way to make the entire div.navbar-header clickable?

Edit This appears to be an iOS bug, and a work-around was simply to add "cursor: pointer" to the div.navbar-header I have a full answer/example below.

Upvotes: 0

Views: 2967

Answers (1)

ericpeters
ericpeters

Reputation: 417

I found a jQuery bug report that had the missing work-around for this iOS problem: http://bugs.jquery.com/ticket/5677

Adding the style="cursor:pointer" to the div.navbar-header fixes the onClick event issue.

The resulting code looks like:

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="cursor:pointer">
  <button type="button" class="navbar-toggle">
    <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" href="#">Brand</a>
</div>

Here's an updated JSBin: Working JSBin Example

Upvotes: 1

Related Questions