CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Niklas Rosencrantz
Niklas Rosencrantz

Reputation: 26652

bootstrap navbar doesn't toggle

When I try the mobile version of my jumbotron-based page, the navbar doesn't toggle. I want it to fold out like in the example but it doesn't. Maybe I'm missing some code, can you help me make it work? This screenshot is how it is supposed to look when the navbar folds out in [the example.

enter image description here

This is my page, which is based on jumbotron but the navbar foldout doesn't work when I press the button to the upper right, it doesn't toggle.

enter image description here

My code (identical to the example). 

<nav class="navbar navbar-inverse navbar-fixed-top">
    <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="/">Customer Service</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <form class="navbar-form navbar-right" action="/account/do_login" method="post">
                <div class="form-group">
                    <input type="text" name="email" placeholder="Email" class="form-control">
                </div>
                <div class="form-group">
                    <input type="password" name="password" placeholder="Password" class="form-control">
                </div>
                <button type="submit" class="btn btn-success">Sign in</button>
            </form>
        </div>
        <!--/.navbar-collapse -->
    </div>
</nav>

Upvotes: 3

Views: 854

Answers (2)

if-trubite
if-trubite

Reputation: 159

Can you show us the part where you import bootstap and jquery ?

I believe the failure is there. Because for me the example is working. I had the same behaviour before bringing my imports into order.

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

This should be placed in the <head> in this order to provide a proper functioning of Bootstrap.

Upvotes: 0

Muhammad Azam
Muhammad Azam

Reputation: 328

Please try to check your bootstrap.min.js or bootstrap.js. may be that are not loading properly.

Upvotes: 3

Related Questions