W-nav-overlay hiding nav bar on mobile


I’ve been struggling with building a nav bar, and there seems to be problem after problem, especially on mobile view.

This is what it looks like on mobile.

This is what it looks like in the inspect tool.

There seems to be a div called w-nav-overlay that appears to be hiding my nav bar drop-down on mobile, but I can’t seem to find it through the webflow UI.
I added a CSS code in the header which sets w-nav-overlay to visible, and it seems to be fixing the issue on the Chrome inspect mobile view but the problem continues when viewed from my phone.

This is the address of the page → https://2023-vareto.webflow.io/work-in-progress/nav-bar-workspace
and here is the read only link.

I would be soo grateful if you can see if the issue can be fixed.

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I have the same issue… super annoying. Had a search on the forum this bug dated up to 2016, surprised that it’s still not fixed


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!


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.