I recently created a website with a mobile navigation menu that should appear when the browser width is less than 1024px. However, I used some JavaScript (with jQuery) to include links to close the menu, but now the site is not displaying these links and the menu is open by default on page load. I'm wondering if I've overlooked something obvious causing this issue?
The live site where this problem occurs is agirlwithacupcake.com and it's built using WordPress.
var eventFired = 0;
if ($(window).width() < 1024) {
$('#navigation').hide();
$('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-left">▼</a>');
$('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-right">▼</a>');
} else {
$('#navigation').show();
eventFired = 1;
}
$(window).on('resize', function () {
if (!eventFired) {
if ($(window).width() < 1024) {
$('#navigation').hide();
$('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-left">▼</a>');
$('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-right">▼</a>');
} else {
$('#navigation').show();
}
}
});
If my question seems unclear or if there's an error in the way I've presented it, I apologize as this is my first time reaching out for help on stackoverflow.