I'm having an issue with my navbar collapse in HTML. Currently, I am using the code provided at http://pastebin.com/s92VvJr6.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><i class="fa fa-bars fa-2x" aria-hidden="true"></i></button>
<img klass="crab" src="images/crab.png" height="50" width="50">
<a class="navbar-brand" href="">Restaurant MaxLax</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="menu-collapsed">
<div class="bar"></div>
<div class="collapse navbar-collapse">
<nav>
<ul class="nav navbar-nav">
<li><a href="#home" onClick="gaq.push(('_trackPageview', 'home'))" class="link">HOME</a></li>
<li><a href="#menu" onClick="gaq.push(('_trackPageview', 'menu'))" class="link">MENU</a></li>
<li><a href="#gallery" onClick="gaq.push(('_trackPageview', 'gallery'))" class="link">GALLERY</a>
<li><a href="#contact" onClick="gaq.push(('_trackPageview', 'contact'))" class="link">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>(I apologize for not knowing how to paste it here correctly, I am new to this)
My problem is that when the page width goes down to 765px, the bar icon appears but I can't click on it to expand the menu options. So my question is:
Q: How do I modify the script so that it works properly with this code?
It would be greatly appreciated if someone could help me out with making these adjustments. Thanks!
Best regards, Max