Issues with hamburger menu load times in wix studio

Ask the community
, ,
1

I’m having trouble with
The mobile hamburger menu in Wix Studio is experiencing a severe delay (5–10 seconds) before opening on mobile devices. The same menu functions fine on desktop and tablet.

Working in
Wix Studio Editor

Site link
here is my site link - this is a copy of my live site as I made changes so the clients customers are not effected while I figure out whats happening

What I’m trying to do
Have the site’s mobile hamburger menu open instantly when tapped, matching the speed and responsiveness of the desktop/tablet versions.

What I’ve tried so far
Duplicated the site into a clean, stripped-down test version (removed all custom fonts, images, and extra elements).

  1. Tested with minimal content to rule out load time issues.
  2. Removed all animations and design effects from the menu.
  3. Tested without the Pro Sliding Gallery.
  4. Verified it’s not caused by page speed, DOM order, or mobile responsiveness issues.
  5. The issue persisted in every test scenario, even on a near-blank site with no images, no custom fonts, and minimal elements.
  6. Confirmed the delay happens across different mobile devices and internet connections.
  7. Tried adding a completely new menu without any formatting and this happens as soon as the generic menu is added

Extra context
The desktop and tablet menus load instantly — only mobile is affected.

  1. The target audience for this site is older users, so a responsive, quick-loading menu is critical for usability.
  2. The issue appears to be a bug in the mobile menu element itself, as all content-related and performance-related causes have been ruled out.
  3. Happy to look at other add on or custom coding options it get the same feel. Client is insistant he wants the menu popout on all views.
2

Hii @user5935 , It is frustrating when you have attempted the solutions, but still the issue is not fixed. Do not lose hope; keep applying the practices. Below are some more advanced techniques to fix this -

  • Replace the mobile hamburger- Hide your native menu only on mobile (keep it on desktop/tablet). Add a hamburger icon (Button/Vector Image) with the ID #hamburgerBtn that is visible only on mobile. Below is the coded example for this -
import wixWindow from 'wix-window';

$w.onReady(() => {

  // Show lightbox only on mobile screens

  wixWindow.getViewportType()

    .then((type) => {

      if (type === 'Mobile') {

        $w('#hamburgerBtn').onClick(() => {

          // instant open (no animation configured on LB)

          wixWindow.openLightbox('MobileMenuLB');

        });

      }

    });

});
  • Wire up Velo code- Below is the coded solution for this -
// Panel menu code (site/header)

import wixWindow from 'wix-window';

import wixLocation from 'wix-location';

function openMenu() {

  $w('#menuPanel').addClass('open');

  $w('#backdrop').addClass('shown');

}

function closeMenu() {

  $w('#menuPanel').removeClass('open');

  $w('#backdrop').removeClass('shown');

}

$w.onReady(async () => {

  const vp = await wixWindow.getViewportType();

// If you only want this custom panel on mobile:

  if (vp === 'Mobile') {

    // hide native mobile menu if necessary (set visibility in Editor too)

    $w('#hamburgerBtn').onClick(openMenu);

    $w('#closeBtn').onClick(closeMenu);     // "X" inside panel

    $w('#backdrop').onClick(closeMenu);     // tap outside to close



    // Doing nothing special here; onClick is immediate.

  } else {

    // If client insists the same popout on all views:

    // Also wire desktop/tablet hamburger to the same handlers.

    $w('#hamburgerBtn').onClick(openMenu);

    $w('#closeBtn').onClick(closeMenu);

    $w('#backdrop').onClick(closeMenu);

  }

  $w('#navHome').onClick(() => { closeMenu(); wixLocation.to('/'); });

  $w('#navShop').onClick(() => { closeMenu(); wixLocation.to('/shop'); });

  $w('#navAbout').onClick(() => { closeMenu(); wixLocation.to('/about'); });

  // Add more as needed

});

Alternatively, if you want a quick and easy way to resolve this, I recommend giving a try to Website Speedy- an optimization app available in the Wix market to resolve the speed-related issues automatically. It comes with a 14-day free trial.

3

This appears to be related to network speed. The hamburger JS isn’t prioritized and on slow connections can take 10 - 15 seconds before the request to the JS file is started. The actual load time of the file can be ~2 seconds.