Bootstrap 3.3.5 - navbar-toggle button not working on iphone

Question

I am working on a bootstrap site and are having issues with my navbar-toggle when viewed on my iphone and ipad. The dropdown button is visible, but does not respond or expand. Seems to be working well in all my computer's browsers.

I am using bootstrap v3.3.5 and jquery-1.11.3

<head>

    <!-- Website Title & Description for Search Engine purposes -->
    <title></title>
    <meta name="description" content="">

    <!-- Mobile viewport optimized -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Bootstrap CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/fonts/bootstrap-glyphicons.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="includes/css/styles.css" rel="stylesheet">
    <link href="includes/css/fonts.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Arvo' rel='stylesheet' type='text/css'>

    <!-- Include Modernizr in the head, before any other Javascript -->
    <script src="includes/js/modernizr-2.6.2.min.js"></script>

</head>

Here is my navbar

<!--Navbar-->
<div class="navbar" role="navigation">
    <div class="container">

        <!--navbar responsive toggle-->
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-target="#navbar-responsive-collapse" data-toggle="collapse" >
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- brand and toggle grouped together for better mobile display -->
            <img class="navbar-brand" src="images/navbar_logo.png" alt="logo">
        </div><!--end of navbar-header-->

        <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
            <ul class="nav navbar-nav navbar-default" id="myNav">
                <li class="active">
                    <a href="index.html"> Home</a>
                </li>
                <li>
                    <a href="services.html"> Services</a>
                </li>
                <li>
                    <a href="contact.html"> Contact</a>
                </li>
            </ul>
        </div><!-- end of collapse-->
    </div><!-- end of container-->
</div><!-- end of navbar -->

bottom links.

<!-- All Javascript at the bottom of the page for faster page loading -->

<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>

<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.11.3.min.js"><\/script>')</script>

<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>

here is a js.fiddle if you would like to see the css: https://jsfiddle.net/Dinkledine/asLLydyz/8/

I've seen similar posts to this, and these are the workarounds I've gathered. So far none of them have worked. So i'm starting to think its my markup.

ive tried: updating bootstrap from v3.3.4 to v3.3.5..... updating jquery from 1.8.2 to 1.11.3..... replacing "ontouchstart" to "disable-ontouchstart" within bootstrap.min.css

thanks for your help!

not sure if this is relevant. But if I remove the .navbar-collapse class, then the dropdown menu responds on my iphone, and in my browser. However then it pushes all content following lower. I would prefer to have the dropdown menu expand over the following content. — Dinkledine, Jun 22 '15 at 02:33
Any particular reason you are using such an outdated version of jQuery? Why not use the current version? — cloned, Mar 19 '21 at 08:14

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

Safari on iPhone only support click event for <a> and <input> element.

You can find your fix here.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 23 '15 at 09:07

SirJord

123
1
1
11

score 0 · Answer 2 · answered Aug 05 '18 at 13:48

<button class="collapse navbar-collapse" id="navbar-responsive-collapse">
        <ul class="nav navbar-nav navbar-default" id="myNav">
            <li class="active">
                <a href="index.html"> Home</a>
            </li>
            <li>
                <a href="services.html"> Services</a>
            </li>
            <li>
                <a href="contact.html"> Contact</a>
            </li>
        </ul>
    </div>

in css:

body{z-index:-1}

Bootstrap 3.3.5 - navbar-toggle button not working on iphone

2 Answers2