Hi Team
I have created an overlay nav menu which works fine on desktop… and responsively on mobile devices in the designer and via desktop browser but doesn’t actually work on a mobile device, could anybody shed some light on why this might be happening?
Many thanks
Here is my site Read-Only: Webflow - Spring 4
https://spring-4.webflow.io/test
(how to share your site Read-Only link)
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 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 {
menu.style.display = 'none';
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>