-1

I tried setup a dropdown in my navbar but I can't make it work. When I click on the account button, it just adds a # to the title. I tried linking the bootstrap-dropdown into the file, I added a javascript but nothing works. I had the same problems with modals. Heres my code:

<!DOCTYPE html>
<html>
<head>
        <title>Dropdown Test!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/bootstrap-modal.css" rel="stylesheet" />
        <link href="css/bootstrap.css" rel="stylesheet" />
        <script type="text/javascript" src="includes/jscript/jquery.js"></script>



<div class="container">


<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <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" name="top">Dropdown Test</a>
              <div class="nav-collapse collapse">
                <ul class="nav">
                                   <li class="divider-vertical"></li>
                    <li class="active"><a href="">Home</a></li>
                    <li><a href="#">Client Area</a></li>
                                        <li><a href="contact">Contact</a></li>
                                     </ul>
                           <ul class="nav pull-right">
                       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Account&nbsp;<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                       <li><a href="clientarea.php">Login</a></li>
                       <li><a href="register.php">Register</a></li>
                       <li class="divider"></li>
                       <li><a href="pwreset.php">Forgot Password?</a></li>
                </ul>
              </li>
                </ul>   
     </div>
      </div>
   </div>
</div>



<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="bootstrap/js/bootstrap-dropdown.js"></script>


  <style type="text/css">


body
{
margin:0;
padding:0;
background-color: #999;
}

.navbar {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;
}

</style>
</body>
</html>
3
  • any errors in your browser's console? Aug 27, 2013 at 12:38
  • You're including jQuery in your page twice, which might cause the Bootstrap JavaScript to bug out...
    – Richard A.
    Aug 27, 2013 at 12:41
  • No errors and I tried to remove one of the jQuery links in the file, didn't work. I've also tried out adding the scprit but nothing works. If you want to, then goto my site and see the demo: hosting.theundeadgamer.com
    – Kotise
    Aug 27, 2013 at 14:05

2 Answers 2

1

Are you missing the script here

<script type="text/javascript">  
    $(document).ready(function () {  
        $('.dropdown-toggle').dropdown();  
    });  

1
  • 1
    I've made it work by adding the jQuery before the bootstrap.css I did change it to the ajax link isntead, everything works now.
    – Kotise
    Aug 27, 2013 at 14:49
0

You have two references to jquery. Remove the bottom one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.