Currently, I am working on a project that requires my navigation bar to be scaled down to a hamburger menu for mobile view. I have managed to do most of it, but for some reason, the navigation is not collapsing within the hamburger bar. I have been tweaking it for hours now and still haven't found the solution.
If you would like to take a look at my progress so far, here is the link to my js fiddle: https://jsfiddle.net/jr01pvkL/8/
Please note that the code might appear messy as it is part of a larger project and I am relatively new to coding.
HTML
<header>
<nav class="floatfix nav">
<div id="hamburgerknop">
<span id="hamburger">☰</span>
</div>
<ul class="main-nav">
<li>
<a href="#" title="Home Page">Home</a>
</li>
...
</ul>
<ul class="icon-nav">
...
</ul>
</nav>
</header>
CSS
html {
height: 100%;
color: #222;
font-size: 1em;
line-height: 1.4;
}
...
JQuery (in HTML footer)
jQuery(function($) {
$('#hamburgerknop').click(function() {
$('.nav').toggleClass('expand');
});
});
Thank you!