Navbar is not showing in bootstrap django

Question

I am copying front-end code from an existing project to django. When I am opening project's index.html in django, the navbar is not showing. But, after resizing, I am getting the navbar. The navigation bar code is:

<div id="decorative2">
    <div class="container">

        <div class="divPanel topArea notop nobottom">
            <div class="row-fluid">
                <div class="span12">

                    <div id="divLogo" class="pull-left">
                        <a href="index.html" id="divSiteTitle">Jamia Alumni USA</a><br />
                        <a href="index.html" id="divTagLine">Scholarship Portal</a>
                    </div>

                    <div id="divMenuRight" class="pull-right">
                    <div class="navbar">
                        <button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse">
                            NAVIGATION <span class="icon-chevron-down icon-white"></span>
                        </button>
                        <div class="nav-collapse collapse">
                            <ul class="nav nav-pills ddmenu">
                                <li class="dropdown active"><a href="index.html">Home</a></li>
                                <li class="dropdown"><a href="apply.html">Apply</a></li>
                            </ul>
                        </div>
                    </div>
                    </div>

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

    </div>
</div>

I checked all static files, and everything looks fine. But, the navigation bar is not showing. I am surprised that how come on resizing from low screen size to high screen, the navbar appears. Please help to solve this.

Answer 1

As you figure it out in the comment section of your question, <div class="nav-collapse"> you should drop this. Or at least set up something else to recollapse. You said it resizes properly, in my opinion bootstrap.css is working. You might not have add the jQuery.js and boostrap.js to your page. That could be a problem too. Check that if they are added. I suggest you to read these pages

for more information about JQuery.js Click here for more information about boostrap.js Click here

it will save your time to look up those site here is the code;

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

Answer 2

This could be simply due to the CMS toolbar overlapping with the navbar.

To reveal the navbar, you can either logout from the CMS admin, or disable the tag {% cms_toolbar %} in the template.