Bootstrap navbar collapse menu not working in mobiles

Question

I have been trying for a long time to fix this for a long time i have ran through my code multiple times have kept jquery files before bootstrap files and still they just don't work!

(I am new to programming so please forgive me if this is a silly error, Thank you!)

<nav class="navbar navbar-default" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <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="<?php echo base_url(); ?>">love</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li><a href="<?php echo base_url(); ?>">Home</a>
            </li>
            <li><a href="<?php echo base_url(); ?>about">About</a>
            </li>
            <li><a href="<?php echo base_url(); ?>contact">Contact</a>
            </li>
            <li><a href="<?php echo base_url(); ?>blog">Help</a>
            </li>
            <li><a href="<?php echo base_url(); ?>blog">Other</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 1

For data-target use an ID. And the same ID on the "collapse navbar-collapse" class div.

<nav class="navbar navbar-default" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="<?php echo base_url(); ?>">love</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li><a href="<?php echo base_url(); ?>">Home</a>
            </li>
            <li><a href="<?php echo base_url(); ?>about">About</a>
            </li>
            <li><a href="<?php echo base_url(); ?>contact">Contact</a>
            </li>
            <li><a href="<?php echo base_url(); ?>blog">Help</a>
            </li>
            <li><a href="<?php echo base_url(); ?>blog">Other</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 2

Order your jquery and bootstrap in correct order. Check below snippet it works correctly.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <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="<?php echo base_url(); ?>">love</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="<?php echo base_url(); ?>">Home</a> </li> <li><a href="<?php echo base_url(); ?>about">About</a> </li> <li><a href="<?php echo base_url(); ?>contact">Contact</a> </li> <li><a href="<?php echo base_url(); ?>blog">Help</a> </li> <li><a href="<?php echo base_url(); ?>blog">Other</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav>