django: bootstrap menu doesn't collapse on mobile device

Question

For my project to look good I have to use bootstrap. Having the default fixed navbar from bootstrap examples included in my base.html and trying it out on mobile devices the menu when tapped doesn't get opened nor does it when the desktop browser is shrinked. Here's the bootstrap code I'm utilizing:

<!-- Fixed navbar -->
<nav class="navbar navbar-default 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>
    </b><a class="navbar-brand" href={% url 'home' %}>SeIDA Project</a></b>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href={% url 'home' %}>Home</a></li>
        <li><a href={% url 'fileuploads' %}>Upload Files</a></li>
        <li><a href={% url 'fileprofile' %}>Your Files</a></li>
        <!-- <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> -->
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>


<br><div class="container"></br>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <p>{% block content %}</p>
    <h3>Welcome to Secure Information Dispersal Information (SeIDA) project </h3>
    <h5><p> SeIDA project encodses your file into n unrecognizable segments such that presence of m segments would suffice to recover the file.</p></h5>
    <h5><p> Using this algorithm provides your data with a high level of confidentiaty and availabality.</p></h5>
    <p>

      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
  </div>

</div> <!-- /container -->
{% endblock%}

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

Note: I am having the bootstrap CDN included also.

Answer 1

There are some issues with your HTML code:

</b><a class="navbar-brand" href={% url 'home' %}>SeIDA Project</a></b>

Must be:

<b><a class="navbar-brand" href={% url 'home' %}>SeIDA Project</a></b>

And you commented this line:

<!-- <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> -->

but the closing tag of li still exist right here:

</ul> </li> </ul>

And since you want the dropdown to work, you need to uncomment the li tag by removing <!-- and --> that surrounding it.

And the last issue with this line:

<br><div class="container"></br>

The br tag can't be written this way, it should be:

<br /> <div class="container"> or <div class="container"> <br /> depends on what you want.

Here's working example of your code, but didn't try on django, only js, css, and html combination. https://jsfiddle.net/azoughbi/rbyqxc86/