navigation menu in django

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="stopNavBar">;

Button to make menu embed in button, if the screen size is small

and hide the menu.

 

 

{% load static %}
<link rel="stylesheet" href="{% static 'myapp/style.css' %}" type="text/css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="stopNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'display' %}"> Algorithm </a>
</div >
<div class="collapse navbar-collapse">
<ul class="collapse navbar-collapse">
<li class="">
<a href="{% url 'login' %}" >
<span class="glyphicon glyphicon-cd" aria-hidden="true"> </span>
Albums

</li>
<li class="">
<a href="{% url 'login' %}" >
<span class="glyphicon glyphicon-cd" aria-hidden="true"> </span>
Songs

</li>

</ul>
</div>

</div>
</nav>