Twitter Bootstrap 3 dropdown menu not working

Question

I have a group of tabs on the left of the navbar, and a button and dropdown on the far right. my paths seem to be correct and I followed the code as stated on getbootstrap docs. The problem is the dropdown menu does not open on click. nothing happens.

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<body>
    <div id="MainWrap">
        <div class="container">
            <h1 href="#" c;ass="text-muted"></h1>

            <div class="navbar navbar-default" >
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse navbar-responsive-collapse">
                    <ul class="nav  navbar-nav nav-tabs">
                        <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                        <li><a href="#about" data-toggle="tab">About</a></li>
                        <li><a href="#contact" data-toggle="tab">Contact</a></li>
                        <li><a href="#services" data-toggle="tab">Services</a></li>
                        <li><a href="#staff" data-toggle="tab">Our Staff</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources<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><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.0.min"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="js/bootstrap.js"></script>
  </body>

Console log errors I am getting:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/Users//Desktop/C%20Website/js/jquery-1.11.0.min
Uncaught Error: Bootstrap's JavaScript requires jQuery

Works for me, if I understand you correctly (jsfiddle.net/qEKcK). Are you sure you included the full CSS? Also, do you have any errors in the console? You will see 404 error if the paths are incorrect. I recommend trying the Bootstrap CDN to double check that is not the problem (bootstrapcdn.com). — bogeylicious
– bogeylicious, Commented Apr 12, 2014 at 22:28
I added the console errors as well as the path to my CSS. I tried the CDN route first and couldn't get it to work? — Bacon2305
– Bacon2305, Commented Apr 12, 2014 at 22:31

s.alem · Accepted Answer · 2014-04-12 22:31:58Z

1

 <script src="js/jquery-1.11.0.min.js"></script>

Perhaps you should add ".js" to the src...

answered Apr 12, 2014 at 22:31

s.alem

13.2k9 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bogeylicious · Accepted Answer · 2014-04-12 22:36:07Z

1

Just to add another suggestion... Try using CDN hosted versions of jQuery and Bootstrap. This will help path errors and also enhance the speed.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

answered Apr 12, 2014 at 22:36

bogeylicious

5,1803 gold badges27 silver badges18 bronze badges

Collectives™ on Stack Overflow

Twitter Bootstrap 3 dropdown menu not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related