0

As title says i'm having trouble with bootstrap navbar menu items not clicking when viewing on iPhone.

I have emulated on chrome and the links work fine.

Any ideas?

 <header id="Home" class="header">
        <div style="text-align:right; color:#ffffff;">For your FREE mediation consultation** call:<br><strong style="font-size:24px;">XXXXXX</strong></div>
            <div class="menu-wrapper">
                <nav id="navigation" class="navbar navbar-default" role="navigation">
                    <div class="navbar-inner">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
                                <span class="sr-only">Toggle navigation</span>
                                <i class="fa fa-bars fa-2x"></i>
                            </button>
                            <a id="brand" class="navbar-brand" href="index.html" style="color:#ffffff; font-size:24px; line-height:24px;">
                            Company <br>
                            Name<br>
                            Here
                            </a>
                        </div>
                        <div class="navbar-collapse collapse" id="navigationbar">
                            <ul class="nav navbar-nav navbar-right" id="nav">
                                <li class="current"><a href="#Home" title="">Home</a></li>
                                <li><a href="#About_Us" title="">About Us</a></li>
                                <li><a href="#Practice_Area" title="">What is Mediation</a></li>
                                <li><a href="#faq" title="">FAQ</a></li>
                                <li><a href="#expertise" title="">Our Expertise</a></li>
                                <li><a href="#fees" title="">Our Fees</a></li>
                                <li><a href="#contact" title="">Contact</a></li>
                            </ul>
                        </div><!-- end navbar-collapse collapse -->
                    </div><!-- nav -->
                </nav><!-- end navigation -->
            </div><!-- menu wrapper -->
        </header><!-- end header -->
Siguza
  • 21,155
  • 6
  • 52
  • 89
Jonny Stuart
  • 1
  • 1
  • what exactly do you mean with "not clicking"? you may also want to edit your question and remove/replace the phone number, as this way it looks like spam. – hoijui Jul 04 '15 at 08:42
  • Thanks for the heads up on the number! In terms of not clicking, I click the menu item and the nav bar hides without going to the anchor tag as it should. – Jonny Stuart Jul 04 '15 at 08:52

1 Answers1

0

OK... I found the culprit however do not know how to fix

 <script type="text/javascript">
      // Close the navbar if collapsed (small screen) when clicking on a menu link
      // From edit 2 on
      // http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click/23171593#23171593
      $(function () {
        $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
          $('.navbar-toggle:visible').click();
        });
      });
    </script>

If I remove this code it works but the menu does not disappear. I'd like a solution where the menu items are clicked and the menu then disappears.

Thanks!

Jonny Stuart
  • 1
  • 1