I am experiencing a peculiar issue with my mobile menu. It works smoothly when the window is resized to below 736px, and the toggle animation adds CSS classes to animate the menu in and out.
However, after resizing the window, opening and closing the mobile menu, and then resizing the window again to hit the media query breakpoint at 736px, the dropdown mobile menu flashes briefly before disappearing.
If anyone has encountered this problem before and can offer a solution, I would greatly appreciate it.
** Note that removing the mobileMenuActive class is not an option as I need the menu to animate out.
To see the code in action, visit: https://codepen.io/emilychews/pen/POeGaN
Here is the JavaScript code:
var mobileMenuButton = document.getElementById("mobile-menu-button")
var mobileMenuItems = document.getElementById("nav-menu-items")
// TOGGLE MOBILE MENU
var mobileMenu = false
function toggleMobileMenu() {
if (mobileMenu === false) {
mobileMenuItems.classList.remove("mobileMenuInactive")
mobileMenuItems.classList.add("mobileMenuActive")
mobileMenuButton.innerHTML = "Close"
mobileMenu = true
} else {
mobileMenuItems.classList.add("mobileMenuInactive")
mobileMenuItems.classList.remove("mobileMenuActive")
mobileMenuButton.innerHTML = "Menu"
mobileMenu = false
}
}
mobileMenuButton.addEventListener("click", function() {
toggleMobileMenu()
}, false)
And here is the CSS code:
body, ul {padding: 0; margin: 0}
...
Finally, here is the HTML code:
<header id="main-header">
<nav id="main-navigation">
<ul id="nav-menu-items">
...
</ul>
<div id="mobile-menu-button">Menu</div>
</nav>
</header>