CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
vicg
vicg

Reputation: 1368

Why doesn't my collapsible menu expand when I click on it?

Don't know what I am missing from my code. When I shrink the size the 3 bars show up but when I click on them they don't toggle the menu.

<!DOCTYPE html>
<html>
<head>
    <title>Prototype</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">  
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-  target="#main-nav">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Brand</a>
            </div>

            <!-- Collect nav links, forms, and other content into div for toggle -->
            <div class="collapse navbar-collapse" id="main-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    </nav> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

here is the code on jsfiddle: http://jsfiddle.net/5SBqQ/

Upvotes: 0

Views: 346

Answers (1)

Nile
Nile

Reputation: 1586

Bootstrap requires jQuery. Adding:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

before you add bootstrap should fix the issue.

http://jsfiddle.net/4LWQv/2/ (Removed the script and link tags for jsfiddle)

Upvotes: 1

Related Questions