I've encountered a glitch with my responsive drop-down navigation that's affecting its functionality.
Here's the scenario: when the page loads, everything works fine. But if I resize the page to reveal the mobile nav (hamburger menu), it behaves strangely. The issue arises
If I switch to mobile view, open the menu, and then resize without closing it, the nav remains visible.
If I go to mobile view, open the menu, close it, and then resize back to full screen, the nav disappears.
I've shared some basic HTML, my JS function, and a link to the site in question below.
HTML
<div class="navigation">
<div class="container1">
<a class="nav-logo" href="index.html"><img src="img/logo.svg"></a>
<div class="mobile">
<ul class="menu nav-left">
<a href="html/main-pages/portfolio.html"><li class="button">Work</li></a>
<a href="html/main-pages/resume.html"><li class="button">Resume</li></a>
<a href="html/main-pages/contact.php"><li class="button">Contact</li></a>
</ul>
<ul class="menu nav-right">
<a href="#"><li class="button"><i class="fa fa-twitter"></i></li></a>
<a href="#"><li class="button"><i class="fa fa-codepen"></i></li></a>
<a href="#"><li class="button"><i class="fa fa-linkedin"></i></li></a>
<a href="#"><li class="button"><i class="fa fa-behance"></i></li></a>
<a href="#"><li class="button"><i class="fa fa-github"></i></li></a>
</ul>
</div>
<span class="nav-toggle"><a href="#"><i class="fa fa-bars"></i></a></span>
</div>
</div>
JS
$( document ).ready(function(){
$(".nav-toggle").click(function(){
$(".mobile").slideToggle(500);
});
});
You can experience the problem firsthand on this website. Thank you for any assistance - feel free to ask any questions!
For reference, here is the jsfiddle