-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>
zessx
  • 65,078
  • 28
  • 121
  • 147
Kotise
  • 1
  • 1
  • 5
  • any errors in your browser's console? – David Hoerster Aug 27 '13 at 12:38
  • You're including jQuery in your page twice, which might cause the Bootstrap JavaScript to bug out... – Richard A. Aug 27 '13 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 '13 at 14:05

2 Answers2

1

Are you missing the script here 

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

Prasanna Aarthi
  • 3,193
  • 2
  • 21
  • 44
  • 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 '13 at 14:49
0

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

DeadlyChambers
  • 4,627
  • 3
  • 39
  • 56