Can't seem to get my navigation panel to slide in when the nav button in the main menu is clicked. I've done this before without issues, so not sure what's up. Any help?
Custom HTML Code
<!-- Header -->
<div class="header"> <a href="#"><i id="nav-button" class="fa fa-navicon"></i></a> <header class="logo"> <a href="index.html"><img src="../Assets/images/logo.png" alt=""></a> </header> <a href="#"><i class="account-control fa fa-user"></i></a> </div> <div class="wrapper"> <div id="content"> </div> <!-- Collapsible Menu --> <div id="sidebar"> <div class="nav-items"> <nav class="mainmenu"> <ul> <li><a href="#">Billing</a></li> <li><a href="#">Support</a></li> <li><a href="#">Servers</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Reports</a></li> </ul> </nav> </div> <!-- Copyright --> <footer> <form action="" class="search"> <input type="search" name="search" placeholder="Search"> </form> <p class="copyright">asdf</p> </footer> </div> </div>Relevant CSS Styles
/* Core Styles */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Rest of CSS code omitted for brevity */
<p><strong>JavaScript Function</strong></p>
<pre><code>jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button, #content').click(function() {
$('#nav-button').toggleClass('open');
$('body').toggleClass('sidebar-open');
return false;
});
});(jQuery);
Using FontAwesome for extra design flair! :)