CODEWITHSUNDEEP
htmltwitter-bootstraptogglenavbar
Siddharth
Siddharth

Reputation: 213

Chrome and Firefox Bootstrap nav toggle not working

Please check in below code what is error:

I have tried to run the same on w3schools demo page and it works fine. but it doenst work on my chrome as well as firefox.

Am I missing something here? Also can you tell me how can we debug such kind of issues?

<body>

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#">Ristorante Con Fusion</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
        </div>
    </nav>
</body></html>

Upvotes: 2

Views: 9007

Answers (2)

Vasukipriya K N
Vasukipriya K N

Reputation: 59

This happens because, there is a lot of difference between Bootstrap versions. There are few classes which only works in few Bootstrap versions. So while adding the link to your HTML file, note the version of Bootstrap that you are working.

Problem: I guess, the code you wrote and the Bootstrap version that you linked is not matching.

Solution: Below are the links and Starter templates of different versions. Refer those and change the version while linking to HTML. You must to include both CSS and Script file of Bootstrap into HTML.

Upvotes: 0

claudios
claudios

Reputation: 6656

There's no error with your code. But I guess you have errors in calling the required source files for bootstrap.

Files needed inside <head> tag:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

Files needed before </body> tag

 <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.6/js/bootstrap.min.js"></script>

Your HTML code should look like this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#">Ristorante Con Fusion</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
        </div>
    </nav>

Upvotes: 3

Related Questions