Solved!
The Webflow community has apparently been looking for a solution to this problem since 2016 (one of the oldest forum posts I found).
I thought to myself: it must be possible for the menu to be automatically adapted for mobile responsiveness like everything else, without having to create a duplicate of it, because otherwise the phenomenon described by everyone with the nav-overlay would exist.
All the YouTube tutorials I found do not offer a satisfactory solution.
One after the other, people write “I have the same problem” or “Has this been solved in the meantime? I don’t feel like building the menu twice (once for desktop and once for mobile).”
This is particularly annoying if it is a menu with many dropdowns or language translations, for which each menu item must then be accessed with its own ID.
What is the problem?
When 1st clicking on the burger menu button to open the menu dropdown, the entire screen height in most cases is full screen on mobile.
If you then 2nd click on it again, the menu can be hidden via Webflow interaction (like move out or change opacity), but an invisible/transparent “nav-overlay” from the Webflow source code remains and covers all elements. This means you can see all site content again, but you can’t click on anything.
I shared my Webflow tab and code editor with our CTO via our own software solution, viewflip.app, so he could help me solve the problem immediately and therefore I can now provide you with this custom JavaScript and screen tooltip guide!
Have a great day everyone!
<script>
function adjustMenuForWindowSize() {
let navOverlay = document.getElementById('w-nav-overlay-0');
let burgerMenu = document.getElementById('burger-menu');
let menu = document.getElementById('menu');
let menuVisible;
if (window.innerWidth <= 991) {
menu.style.display = 'none';
menuVisible = false;
} else {
menu.style.display = 'flex';
menuVisible = true;
}
burgerMenu.addEventListener('click', function() {
if (!menuVisible) {
menu.style.display = 'block';
navOverlay.style.display = 'block';
menuVisible = true;
} else {
setTimeout(function() {menu.style.display = 'none';}, 1000); // if an animation interaction is set in Webflow (such as Move or Hide), make sure that this timeout is set to wait this long.
setTimeout(function() {navOverlay.style.display = 'none';}, 100); // this is required to overwrite the Webflow behaviour
menuVisible = false;
}
});
}
window.addEventListener('load', adjustMenuForWindowSize); // Run function not only on site load,
window.addEventListener('resize', adjustMenuForWindowSize); // but on resizing between device width, too.
</script>
