How can I hide and reveal the mobile menu I've created using Jquery? I want it to be hidden when the page loads and only appear when the user clicks on the 'header'. Additionally, I need the menu to remain open even when the user scrolls down the page. The solution mentioned in this post almost works but has some issues.
Currently, when the page loads, the menu is open. If I try to specify that it should be closed by using else $nav.hide();}, the menu automatically closes when I scroll down on my mobile device. On the other hand, if I make it hidden upon loading with media queries, I face problems with the desktop layout as the menu links do not return to their original position when resized (they stack under each other instead of being side by side - I am using inline-block for display).
If anyone has any suggestions or guidance on how to tackle this issue, it would be greatly appreciated. Thank you.
JQUERY
var screensize = document.documentElement.clientWidth;
$(function (){
var $window = $(window),
$nav = $('.link'),
$button = $('header');
$button.on('click', function (){
$nav.slideToggle(500);
});
$window.on('resize', function (){
if ($window.width() > 600)
{
$nav.show();
}
});
});