CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Dinesh
Dinesh

Reputation: 7

why collapse option under navigation bar not working in bootstrap3?

The collapse option to group the list of options in the navigation bar is not working.

Please check the HTML code and help by giving the solution to it. I want it to be fully responsive.

<!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>TestRank</title>

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

    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
            <div class="navbar-header">

                <button type="button" class="navbar-toggle" 
                        data-toogle="collapse" data-target="#mynavbar">
                    <!--<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="index.html"><img src= "Logo.png" style="width:120px; height:30px;" alt="TestRank" ></a>
            </div>
                <div class="navbar-collapse collapse" id="mynavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="About.html">About</a></li>
                        <li><a href="Features.html">Features</a></li>
                        <li><a href="Contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src ="js/bootstrap.min.js"></script>
    </body>
</html>

Upvotes: 0

Views: 43

Answers (1)

Giesburts
Giesburts

Reputation: 7648

You had a typo at <button type="button" class="navbar-toggle" data-toogle="collapse" data-target="#mynavbar" aria-expanded="false"> where data-toogle="collapse" is wrong what must be data-toggle="collapse"

This is the right code:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"  aria-expanded="false">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>          
      <a class="navbar-brand" href="index.html"><img src= "Logo.png" style="width:120px; height:30px;" alt="TestRank" ></a>
    </div>

        <div class="collapse navbar-collapse" id="mynavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">Home</a></li>
                <li><a href="About.html">About</a></li>
                <li><a href="Features.html">Features</a></li>
                <li><a href="Contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 1

Related Questions