CODEWITHSUNDEEP
htmldrop-down-menutwitter-bootstrap
Patrick
Patrick

Reputation: 159

Twitter Bootstrap DropDown Menu Issue

I'm new to Bootstrap and am learning how to use it. I'm having some trouble getting a simple Dropdown menu to "drop down" when clicked on this beta site.

I would really appreciate if someone could look at my page source and let me know what's wrong. Below is the html of the dropdown menu. 

 <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <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>
      <a class="brand" href="/">Restavec Freedom Alliance</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/blog">Blog</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Upvotes: 2

Views: 2766

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75409

<script type="text/javascript" src="/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap-dropdown.js"></script>

The reason why your menu is not working properly is because you're initiating the same script three times. The bootstrap.js and .min.js variation have all the plugins packaged within them, one is the full dev version and the other is meant for production, the minified version. The third script is a loose plugin script which is not needed if you are already including the packed version. So remove the second and third scripts loaded in your header and your menu should work.

Edit

Just noticed something else, the .collapse class was also preventing the menu from showing since it is only used upon mobile nav collapse, so it does not need to be included.

Upvotes: 2

Related Questions