CODEWITHSUNDEEP
twitter-bootstrap
Gaurav Tiwari
Gaurav Tiwari

Reputation: 111

Navbar collapse is not working in mobile version?

My bootstrap navbar collapse is not working in mobile version.

Here is my code:

<nav class="navbars  navbar-inverse">
    <div class="row">
        <div class=" col-xs-12 ">
            <div class="navbar-header " role="navigation">
                <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
                 <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span> 
                  </button>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav  navbar-nav  ">
                   <li><a href="<?= site_url('api/about_us') ?>"> About Us</a></li>
                   <li ><a href="<?= site_url('api/home') ?>"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
                   <li><a href="<?= site_url('api/regis') ?>"><span class="glyphicon glyphicon-user"></span> Volunteer Registration</a></li>
                   <li><a href="<?= site_url('api/postingcomplaints') ?>"><span class="glyphicon glyphicon-comment"></span> Post Complaints</a></li>
                   <li><a href="#" class=" pull-right"   data-toggle="modal" data-target="#myModal2"><span class="glyphicon glyphicon-map-marker"></span> Track Complaints</a></li>
                   <li><a href="<?= site_url('api/contact') ?>"><span class="glyphicon glyphicon-phone-alt"></span> Contact Us</a></li>
                   <li> <a href="#" class=" pull-right"   data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-log-in"></span>LogIn</a></li>

                </ul>

            </div>
            </div>
        </div>
    </div>  
 </nav>
<!--nav end-->

Can anyone tel me what i am doing wrong?

Upvotes: 2

Views: 74

Answers (1)

user3589620
user3589620

Reputation:

You need to set 1. jQuery and 2. JavaScript (order is important!) in the <head> section.

<head>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

Demo

Upvotes: 2

Related Questions