CODEWITHSUNDEEP
twitter-bootstrap
davidxd33
davidxd33

Reputation: 1206

Bootstrap 3 navbar doesn't expand on collapse

After the million bootstrap navigation bars I've made, this one is just giving me headaches. My bootstrap navbar does not expand on collapse. I've tried updating the boostrap.min.js three times thinking it was the problem (since it was customized) however it did not work. I've also tried using the dist version of bootstrap 3.3.0 (released not too long ago) and it still did not work.

I've read many questions of similar issues and they all were resolved because the OP was missing js or wrote incorrect markup. I've looked over my markup many times and it seems right. Here we go:

<nav class="navbar navbar-default 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-collapse">
                <span class="sr-only">Toggle navigation</span>
                <i class="fa fa-navicon"></i>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">Products</a>
                </li>

                <li>
                    <a href="#">Services</a>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <div>
                        <a href="#" class="btn navbar-btn btn-primaryBlue">Sign In</a>
                    </div>
                <li>
            </ul>

        </div>
    </div>
</nav>

It collapses but doesn't expand once clicked. I don't use bootstrap glyphicons, in this example I'm using the navicon from font awesome. Does it look ok?

Upvotes: 1

Views: 2554

Answers (1)

khan33
khan33

Reputation: 101

Make sure that you have added JQuery to your project sometime you should add that at the top of you web page to work.

CDN 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Upvotes: 1

Related Questions