Foundation top bar toggle not working

[skabbit]

My code is here: http://ivanabilic.mixture.io/nnb/ The top bar adjusts to a dropdown when under 940px, but the toggle does not work at that point. I initialise the topbar script in the footer, but I don't know how to fix this. I think it's a problem with my CSS, but not sure how. Help? Thanks! EDIT: This is the navbar code specifically: \[code\] <div class="nav-background"> <div class="row" id="top"> <div class="twelve columns"> <nav class="top-bar"> <ul> <li class="name"><h1><a href="http://stackoverflow.com/questions/14424730/#"><img src="http://stackoverflow.com/questions/14424730/{{"public/images/logo.png" | root_asset }}" alt="PlusDigital"></a></h1></li> <li class="toggle-topbar"><a href="http://stackoverflow.com/questions/14424730/#"></a></li> </ul> <section> <ul class="right"> <li class="active"><a class="home" href="http://stackoverflow.com/questions/14424730/#"> <img class="home-icon" src="http://stackoverflow.com/questions/14424730/{{"public/images/home-icon.png" | root_asset }}" alt="Home"></a></li> <li><a href="http://stackoverflow.com/questions/14424730/#">Web Solutions</a></li> <li><a href="http://stackoverflow.com/questions/14424730/#">Plans & Pricing</a></li> <li><a href="http://stackoverflow.com/questions/14424730/#">Agency Services</a></li> <li><a href="http://stackoverflow.com/questions/14424730/#">Portfolio</a></li> <li><a href="http://stackoverflow.com/questions/14424730/#">Contact</a></li> </ul> </section> </nav> </div> </div> </div>\[/code\]And this is the initialise of the Javascript: \[code\] <script src="http://stackoverflow.com/public/scripts/jquery.foundation.topbar.min.js"></script> <script type="text/javascript">$(document).foundationTopBar();</script>\[/code\]