So I'm trying to make a nice header at the top of my Django site that collapses whenever someone has a small window or they're on mobile. The nav menu collapses fine and looks great. However, whenever you click on the collapsed menu button (the hamburger icon), nothing happens when it should be expanding the menu. I've made sure that my actually points to the correct thing, being ".navbar-collapse". I've looked at other questions like this that show examples that work with the same things I have, so I'm not sure why it isn't working for me.
Here's where I setup my navbar:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Any ideas?
Your code seems working fine, most probably the problem has to be with your jquery and/or bootstrap.js CDN's. Insert the correct CDN's.
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>