CODEWITHSUNDEEP
twitter-bootstrap
Ibanez1408
Ibanez1408

Reputation: 5058

Bootstrap dropdown is not working or is not toggling

I am new to Bootstrap. Please tell me what is wrong with this code since I cannot seem to make my dropdown or the toggle work. Thank you.

<!DOCTYPE html>
<html>
<head>
    <title>Red Stone One Stop Shop</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css " />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
    <script src="https://ajax.googleapis.com/libs/jquery/2.1.3/jquery.min.js">  
    </script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <a href="/ecommerce/index.php" class="navbar-brand">Red Stone One Stop Shop</a>
        <ul class="nav navbar-nav">
            <!-- Dropdown menu -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men  <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Shirts</a></li>
                    <li><a href="#">Pants</a></li>
                    <li><a href="#">Shoes</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
</body>
</html>

Upvotes: 1

Views: 9640

Answers (3)

Nancy
Nancy

Reputation: 178

Check if bootstrap css is added in head tag. If not, add this to the head tag in the html.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css"   href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Upvotes: 0

charly3pins
charly3pins

Reputation: 388

I've done your example in JSBin here and it works correctly.

It seems that the version of jQuery you were using was too old for it.

Change this:

<script src="https://ajax.googleapis.com/libs/jquery/2.1.3/jquery.min.js">

for this:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Hope it helps.

Upvotes: 0

Jerad Rutnam
Jerad Rutnam

Reputation: 1546

First thing you should do is get the official Boiler Template from bootstrap website. That will make things easier. And do the changes as you desire.

See the example below,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Red Stone One Stop Shop</title>

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

    <link rel="stylesheet" type="text/css" href="css/main.css" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          <a href="/ecommerce/index.php" class="navbar-brand">Red Stone One Stop Shop</a>
          <ul class="nav navbar-nav">
             <!-- Dropdown menu -->
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men  <span class="caret"></span></a>
               <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Shirts</a></li>
                  <li><a href="#">Pants</a></li>
                  <li><a href="#">Shoes</a></li>
                  <li><a href="#">Accessories</a></li>
               </ul>
             </li>
          </ul>
      </div>
    </nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Check the working example: JSBin

But the issue in your code is that your jquery version is old, just update it to a version like, https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js. Because I believe you are using bootstrap version 3.x.x

See the working example after updating the jquery version: JSBin

Upvotes: 1

Related Questions