CODEWITHSUNDEEP
jqueryhtml
mendz
mendz

Reputation: 473

bootstrap toggle. collapse not working

i am following a tutorial on how to create a nav bar with drop down function but things are not working preperly.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <title>My Bootstrap</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
     <script       src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">      </script>
      <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">  </script>-->
     <link rel="text/javascript" href="bootstrap/js/bootstrap.min.js" />
 </head>

 <body>

     <!-- Top Menu Bar-->
     <nav class="navbar navbar-inverse">
         <div class="container-fluid">          
             <!-- Logo -->
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
                 <a href="#" class="navbar-brand">COLLAPSE NAVBAR</a>
             </div>

             <!-- Menu Items -->
             <div class="collapse navbar-collapse" id="mainNavBar">
                 <ul class="nav navbar-nav">
                     <li class="active"><a href="#">Home</a></li>
                     <li><a href="#">About</a></li>
                     <li><a href="#">Contact</a></li>
                 </ul>  
             </div>

         </div>
     </nav>

     <!-- Main Content -->
     <div class="container">



     </div>
 </body>

 </html>

the toggle function is working properly but the menu items are not collapsing upon clicking the button. base on the tutorial this is a jquery issue. i tried using the updated one but still didn't work. i also tried downloading the jquery file still didn't work. can someone tell me what wrong with this code?

Upvotes: 0

Views: 14548

Answers (4)

Saroj
Saroj

Reputation: 1571

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>        
  </head>
  <body>       
     <nav class="navbar navbar-default">
       <div class="container-fluid">           
         <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="#">Brand</a>
         </div>        
         <div class="collapse navbar-collapse" id="mainNavBar">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
             <li><a href="#">Link</a></li>
           </ul>     
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container-fluid -->
     </nav>
   </div>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">        </script>
 </body>
</html>

Here is a link to plunkr

You missed a class collapsed and a space was there between

data- toggle="collapse"

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" aria-expanded="false">

Upvotes: 1

ThinhLe
ThinhLe

Reputation: 409

Maybe your screen size is not fixed. Try to add this css and check your screen size.

@media (max-width: 1024px) {
.navbar-header {
float: none;
}

.navbar-toggle {
display: block;
}

.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.navbar-collapse.collapse {
display: none!important;
}

Upvotes: 0

ThinhLe
ThinhLe

Reputation: 409

Here is full code. Try this

<nav class="navbar navbar-inverse">
 <div class="container-fluid">          
     <!-- Logo -->
     <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
         <a href="#" class="navbar-brand">COLLAPSE NAVBAR</a>
     </div>

     <!-- Menu Items -->
     <div class="collapse navbar-collapse" id="mainNavBar">
         <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Contact</a></li>
         </ul>  
     </div>

 </div>

CSS:

Upvotes: 0

ThinhLe
ThinhLe

Reputation: 409

Change this. Your mistake here:

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

to

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

Upvotes: 0

Related Questions