CODEWITHSUNDEEP
htmltwitter-bootstrap
cosmichero2025
cosmichero2025

Reputation: 1029

Bootstrap dropdown-menu is not working

Hello my bootstrap nav is not dropping down into different sections like I've seen it in examples on multiple sites. I've tried moving things around but to no avail. I feel like I'm missing something very simple though so any input would be much obliged :D

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="/styles/style.css">
    <link rel=stylesheet type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <title>Personal Portfolio</title>
</head>

<body>

    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Page 1-1</a></li>
                        <li><a href="#">Page 1-2</a></li>
                        <li><a href="#">Page 1-3</a></li>
                    </ul>
                </li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>

    <footer>
    </footer>

</body>

</html>

AN EXAMPLE :D

https://jsfiddle.net/pajdnLwv/

Upvotes: 3

Views: 5325

Answers (3)

Roy
Roy

Reputation: 8079

You missed loading the following JS libraries to make the dropdown menu work:

  • jQuery library (to get the Bootstrap JS work)
  • Bootstrap JS (to get the dropdown work)

See a working solution: JSFiddle

Add this to your <head> to get it working:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Upvotes: 7

JP Lew
JP Lew

Reputation: 4469

Updated answer for anyone using Bootstrap 4.

Please note that in Bootstrap 4, dropdown menus depend on the popper.js library as well (the umd version specifically). So to get them to work, you need jquery, popper, and bootstrap loaded, in that order. As of today, that looks like this: 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Source: Bootstrap Docs > Introduction > Quick Start

Upvotes: 1

Milind Gokhale
Milind Gokhale

Reputation: 585

You just need to include the javascript files in your head tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

You can try it here

Upvotes: 3

Related Questions