CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Codex Mimi
Codex Mimi

Reputation: 5

collapsible navbar not working

I am trying to design a webpage using bootstrap. But my navbar does not collapse.

All the contents of span box are supposed to be inside the created button.But they appear on the header itself.

What could be the problem?

My output window

Here is the code:

<html lang="en">
    <head>

        <meta charset="utf.8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    </head>
    <body>


        <!--navbar    navbar-inverse:black bar   -->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="mynavbar">
            <div class="container">

                <div class="navbar-header">
                    <!--button     data toogle set to collapse for enabling size variations ex.mobile-->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">

                        <!--span box    list of items inside the button-->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                    </button>

                    <a href="" class="navbar-brand">Sample</a>
                </div><!--Header-->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#feedback">Feedback</a>
                        <li><a href="#gallery">Gallery</a>
                        <li><a href="#contact">Contact</a>
                    </ul>
                </div>
            </div><!--Container-->

        </nav>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>
</html>

Upvotes: 0

Views: 155

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362380

It's not data-toogle, it's data-toggle.

Fix the typo:

data-toogle="collapse"

Upvotes: 2

Related Questions