Navbar menu not closing (With click on menu and li elements)

Question

I have tried multiple solutions surrounding this issue which I have found on stack but I still can't seem to solve my particular issue. this is what I am working on http://dev.joneslewis.co.uk/. As you can see, in mobile view the hamburger menu doesn't collapse once opened whether I click on li element or the menu itself. As the site is based on anchors it's a real pain...

Here is the html I am currently working with and the Js...

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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" rel="home" href="#">
     <img class="img-responsive" style="max-width:35px; margin-top: -7px;"
          src="#"/>
      </a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#about">About</a></li>
        <li><a a data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Javascript...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://joneslewis.co.uk/bootstrap/jquery.js"></script>
      <script src="http://joneslewis.co.uk/bootstrap/bootstrap.min.js"></script>
      <script>
      $(document).ready(function () {
    $(".navbar-nav li a").click(function(event) {
        $(".navbar-collapse collapse").collapse('hide');
    });
});
      </script>

I tried the solution http://stackoverflow.com/a/21967883/639406 at your site and its working, give a try to this code...you can upvote the answer [FYI - it is not written by me] if it solves your problem — swapnesh, Dec 19 '15 at 18:33
Possible duplicate of [Bootstrap 3 collapsed menu doesn't close on click](http://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click) — swapnesh, Dec 19 '15 at 18:37
This doesn't look like a dup - this user is already using the fix recommended in that other question. — Joe White, Dec 20 '15 at 02:47

travelerg17 · Answer 1 · 2015-12-20T02:24:36.483

1

It appears the selector is incorrect. I tried this and I was able to select the component and hide the menu.

$(".navbar-collapse.collapse").collapse('hide')

edited Dec 20 '15 at 02:24

answered Dec 19 '15 at 19:01

travelerg17

31
5

Navbar menu not closing (With click on menu and li elements)

1 Answers1