Twitter Bootstrap mobile menu not working

Question

I have developed a website using Joomla3 and Twitter Bootstrap. In the mobile view and also in the tablet view main menu does not work. It does not open up or close up. I went through the console as well but no errors are shown.

Given that I went thorugh all the existing question on the SO. None of them seems to help me.

Link to the [web site]

How can I fix this?

Update

Issue has been fixed. It's no longer existing in the site. Please see the accepted answer below.

Answer 1

If you inspect the site with the likes of Firebug or Chrome Dev Tools, you will notice that bootstrap.min.js is being loaded twice.

Loading multiple instances may cause conflicts and therefore might be the reason why your responsive menu isn't working. Try removing 1 instance of the .js file first.

Answer 2

This looks like, bootstrap 2.3, correct? As per the documentation:

http://getbootstrap.com/2.3.2/components.html

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
      <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
  </div>
</div>

The differences I see between your code and the code from the documentation is that they use an anchor tag while you're using a button, and your classes are different. Try switching those up and see if it works!