Changes Needed
Mobile Nav Menu
Reason
This fix along with updated CSS addresses two intermittent issues with the Mobile Nav Menu
- The menu overlay was intermittently getting in the way of clicks in mobile view
- The hamburger menu animation was not consistently animating (sometimes if clicked in certain ways it would stay in its closed or open animation when the menu was in the opposite state.
Implementation
Previously
...
<div class="mobile-nav-button w-nav-button">
<div class="mobile-menu-hamburger-button">...</div>
</div>
<div class="left-menu-container">
<nav role="navigation" class="nav-menu w-nav-menu">...</nav>
</div>
...Change structure to
...
<div class="mobile-nav-button w-nav-button">
<div class="mobile-menu-hamburger-button">...</div>
</div>
<nav role="navigation" class="nav-menu w-nav-menu">...</nav>
<div class="menu-overlay"></div>
...Changes
- Remove <nav class="nav-menu w-nav"> from <div class="left-menu-container">, and place it above <div class="left-menu-container"> so <nav> is at the same level (sibling) to <div class="mobile-nav-button w-nav-button">. Note: code inside <nav> should remain unchanged.
- Change the class name on <div class="left-menu-container"> to <div class="menu-overlay"> and ensure it is a sibling to <div class="mobile-nav-button w-nav-button"> and <nav class="nav-menu w-nav"> and is positioned below <nav> Note: the menu-overlay div should have no contents.