CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user3576490
user3576490

Reputation: 55

How to show a drop down menu from the collapse btn (bootstrap)?

I have this code for a bootstrap navbar and I added the collapse feature so whenever you have a small screen it collapses the the page links into button and whenever you push the btn it opens a drop down menu but I have a problem when clicking the collapse btn nothing happens please help!

<!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, initialscale=1">
    <title>Home</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
      .box {
        border: 1px solid grey;
        background-color: #d3d3d3;
      }
    </style>
  </head>

  <body>
    <div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="" class="navbar-brand">My Website</a>
          <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="">Page 1</a></li>
            <li><a href="">Page 2</a></li>
            <li><a href="">Page 3</a></li>
          </ul>
        </div>
      </div>
    </div>

    <script src="jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

</html>

Upvotes: 2

Views: 2137

Answers (2)

MUHAMMAD Siyab
MUHAMMAD Siyab

Reputation: 446

I found that you are missing - (hypen) in your data-toggle attribute

use:

<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">

instead of:

<button type="button" class="navbar-toggle" datatoggle="collapse"
data-target="#myNavbar">

Note: You must include jquery.js & bootstrap.js (located in js folder) files to use this feature.

Upvotes: 2

neophyte
neophyte

Reputation: 6626

Are you sure you are using correct bootstrap libararies. I don't find anything wrong in your code. So I would suggest two alternative to you--- 1. Use these CDN s and in this perticular order.

suggested

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

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

  1. Change this two lines---

    <button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">

<div class="collapse navbar-collapse" id="myNavbar">

Hope this helps!

Upvotes: 0

Related Questions