Collapsed bootstrap navbar not working - html

Question

I have this navbar. It works great in regular screen width, but when collapsed, the mobile navbar button doesn't work. I've tried to find any unclosed divs and other issues but can't identify any. Thanks in advance for any help! Apologies for the beginner question
<nav class="navbar navbar-default" role="navigation">
<!-- 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-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-brand" href="#">
<div class="text-center">
<img alt="nav" src="/assets/navbar.png" />
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<h4>
<ul class="nav navbar-nav navbar-left">
<!-- <li> Help </li>-->
<li> Buy </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Search </li>
<li class="dropdown">
My purchases<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> My profile </li>
<li class="divider"></li>
<li> Items bought </li>
<li> Items sold </li>
<li class="divider"></li>
<li> Purchase history </li>
</ul>
</li>
<li class="dropdown">
Settings <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> Edit my profile </li>
<li> Manage my profile </li>
<li class="divider"></li>
<li class="dropdown-header">GOODBYE </li>
<li> <a data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a> </li>
</ul>
</li>
</div><!-- /.navbar-collapse -->
</nav>
</h4>

Answer 1

Clean-up your HTML and it should work fine. There are several missing close tags (/ul, /div) and the /h4 is closed at the end.
http://bootply.com/ytu2dul2yw