Menu on mobile and tablet closing immediately after opening

Hello,
I’m struggling to find what causes my menu to close by itself on mobile and tablet.
I’ve used animation for my mega menu (to open and close on hover) but it’s not activated for mobile and tablet.
The issue isn’t visible from the designer though.
Could you please help me? It’s my last bug before delivering to my client.

Thanking you in advance


Here is my site Read-Only: https://preview.webflow.com/preview/citinnov?utm_medium=preview_link&utm_source=designer&utm_content=citinnov&preview=f3e743661ee1b446555aa865f63335db&workflow=preview

@vincent Any idea please?

Hi @Jessypage, when the auto open on hover is set to the DropDown and when then Dropdown is nested in a Navbar, I would recommend to disable the open on hover setting for each dropdown widget:

Shared with CloudApp

I might also recommend to give your navbar class a little z-index so that the menu content is over other content on the page:

Shared with CloudApp

I hope this helps

Hello @cyberdave and thank you for your message.
I think the issue is more about the menu button than the dropdown.
If you check on your mobile citinnov.com, you’ll see that the menu closes 1s after opening.
Would you have any idea where it comes from please?

Read only: https://preview.webflow.com/preview/citinnov?utm_medium=preview_link&utm_source=designer&utm_content=citinnov&preview=50551cd04967b2e01776c3634ddbfe65&workflow=preview

Hi @Jessypage, thanks, for the reply, it looks like the behavior is happening only on the published site from what I can see.

Custom code is not rendered in the designer and can affect to the normal operation of the native widgets.

I would temporarily remove any custom code that is being used on the home page, republish and then check again.

If the issue is resolved, then add back custom code script by script and republish each time until you find the custom code that is affecting the mobile nav behavior.

I usually create a duplicate of the original site, then remove custom code from the duplicate and publish that to check for code conflicts.

Hello Dave,
Thank you for your answer. I found the issue thanks to you, but didn’t solve it.
The issue is that I use custom code for auto switch tabs and this is causing the menu on mobile to close (AutoPlay Tabs - Any ideas? - #5 by pepperclip)

They mentioned a solution there but it doesn’t work for me…

I had the same problem but i found a solution with the help of Chat GPT. So why not share it here for the next person that came across the same issue.

var Webflow = Webflow || [];
Webflow.push(function () {
    // Fix for Safari
    if (navigator.userAgent.includes("Safari")) {
        document.querySelectorAll(".tab-button").forEach((t) => (t.focus = function () {
            const x = window.scrollX, y = window.scrollY;
            const f = () => {
                setTimeout(() => window.scrollTo(x, y), 1);
                t.removeEventListener("focus", f);
            };
            t.addEventListener("focus", f);
            HTMLElement.prototype.focus.apply(this, arguments);
        }));
    }

    // Check if the screen width is greater than 768 pixels (adjust as needed)
    if (window.innerWidth > 768) {
        // Start Tabs
        var tabTimeout;
        clearTimeout(tabTimeout);
        tabLoop();

        // Connect your class names to elements
        function tabLoop() {
            tabTimeout = setTimeout(function () {
                var $next = $('.tabs-menu').children('.w--current:first').next();

                if ($next.length) {
                    $next.click();  // user click resets timeout
                } else {
                    $('.tab-button:first').click();
                }
            }, 5000);  // 5 Second Rotation
        }

        // Reset Loops
        $('.tab-button').click(function () {
            clearTimeout(tabTimeout);
            tabLoop();
        });
    }
});```