To ensure my project looks visually appealing, I've decided to incorporate Bootstrap. However, I am facing an issue with the default fixed navbar from Bootstrap examples in my base.html file. On mobile devices, tapping the menu does not open it, and even when resizing the browser on desktop, the menu remains unresponsive. Below is the Bootstrap code snippet that I'm currently using:
<!-- 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>
<a class="navbar-brand" href={% url 'home' %}>SeIDA Project</a>
</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 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 »</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: The bootstrap CDN is also being included.