Is your mobile menu not working correctly after activating Ezoic's Leap optimization? This can be a common issue with several potential causes, but fortunately there are a few solutions that you can try to resolve it. This article will guide you through troubleshooting steps to identify and fix the problem, ensuring your mobile menu functions smoothly while still benefiting from Leap's optimization features.

When Leap is enabled, it is possible users may experience the following common symptoms indicating issues with the mobile menu:

1. Mobile Menu Not Loading: The mobile menu fails to appear when the site is accessed on a mobile device.
2. Mobile Menu Non-Functional: The mobile menu appears, but does not respond to user interactions.
3. Intermittent Functionality: The mobile menu may work inconsistently, sometimes loading as expected and other times failing to load or function.

Potential causes

• Script Delay - This tool defers the loading of scripts in order to improve loading times. However, delaying some scripts might break site functionality, such as menus, if the script is required for the feature to work. The scripts that are required for the menu to load will depend on the theme / page builder tools you are using.
• Remove Unused CSS - The Remove Unused CSS feature detects unused CSS files and then prevents them from being loaded to improve loading speed for the necessary files and content. Sometimes CSS files will be incorectly categorized as unused because the CSS file is not needed to load the actual page and is only used when the mobile menu is selected. This can lead to Leap incorrectly removing CSS files that are needed to load the menu.

Firstly, you will need to determine which one of the features mentioned above is causing this issue. The easiest steps to take are as follows:

Step 1: Is this Leap?

• Deactivate Leap and then check your site to see if this issue is caused by Leap or something else. If the issue goes away, then we know Leap is causing the issue.

Step 2: What feature is causing this?

• Deactivate either Script Delay or Remove Unused CSS by going to the Leap dashboard > Optimize > Change Settings, then toggling off these settings one at a time.

Step 3: Preview

• Once you have disabled one of the settings, go to the preview and see if the mobile menu is working. Depending on which feature needs to be disabled, you will need to follow the appropriate procedure to fix the menu.

(Note: It can be the case that both features are causing the issue, and you will need to follow both guides below.)

Script Delay

If the issue is caused by Script Delay, follow these steps:

1. Navigate to the Script Delay settings and use the Find Delayed Scripts Tool.

2. Click the “Clear Table” button, then enter the URL of the page you are troubleshooting in the “Find Scripts on URL” section and press Enter on your keyboard.

3. Review the list of external and inline scripts found on the specified URL. Scripts that are bubbled in for Don't Delay will be added to the Exclusion Rules and will no longer be delayed. Scripts bubbled in for Delay will remain delayed. The scripts that are highlighted in yellow have been marked as potentially troublesome to delay, which can help when trying to determine which scripts that are delayed may be causing problems on the site.

4. Use the search bar to filter relevant scripts by entering the name of your theme or just “theme”. The most common scripts that need to be excluded in the case of menu issues are scripts related to the theme.

5. Exclude scripts one by one by selecting Don't Delay for the troublesome scripts, then preview the site to see if this fixes the mobile menu issue. (Note: you may need to exclude multiple scripts in order for the menu to work)

6. While previewing the site, use the Chrome Dev Tools mobile preview mode (F12, then select the mobile icon) to view the mobile menu.

7. If you are using a page builder like Elementor and excluding every script does not resolve the issue, you will need to completely disable Script Delay. (Note: Disabling Script Delay is detrimental to site speed; consider moving away from page builders like Elementor which are known for adding bloat to sites and making it difficult to optimize scripts and CSS.)

Remove Unused CSS

If the issue is caused by Remove Unused CSS, follow these steps:

1. Navigate to the Remove Unused CSS options and use the Find CSS Sheets Tool.

2. Click the “Clear Table” button, then enter the URL of the page you are troubleshooting in the Find Styling on URL section and press Enter on your keyboard.

3. Review the CSS files detected on that page. Files marked as Process are able to be removed by Leap. Files marked as Don't Process will be excluded from being removed by Leap.

4. Use the search bar to filter relevant CSS files by entering the name of your theme or just “theme”. The most common CSS files that need to be excluded in the case of menu issues are related to the theme.

5. Exclude necessary CSS files from removal one by one by selecting Don't Process for the relevant files. Then preview the site to see if this fixes the mobile menu issue. (Note: you may need to exclude multiple files in order for the menu to work)

6. While previewing the site, use the Chrome Dev Tools mobile preview mode (F12, then select the mobile icon) to view the mobile menu.

Once you've found the right combination of scripts in Script Delay or CSS Files in Remove Unused CSS, and have previewed the site, go to the next page and Activate the new Leap settings.

By following these troubleshooting steps, you should be able to resolve most issues related to mobile menu functionality.

To prevent issues with your mobile menu when using Leap, consider the following best practices:

1. Regularly Update Themes and Plugins: Ensure that your themes and page builder plugins are always updated to the latest versions. Developers often release updates to fix bugs and improve compatibility with optimization tools like Leap.
2. Limit Use of Page Builders: Page builders like Elementor can bloat your site and complicate optimization efforts. Consider using more lightweight alternatives or minimizing the reliance on page builders to improve your site's performance and reduce the risk of conflicts with optimization tools.
3. Test Changes in a Staging Environment: Before applying significant updates or changes, test them in a staging environment. This allows you to identify potential issues without affecting your live site.
4. Monitor Site Performance: Regularly monitor your site’s performance using tools available in the Leap dashboard. This will help you quickly identify and address any issues that may arise.

Following these tips can help maintain optimal performance and prevent issues with your mobile menu functionality.

If you need further assistance with fixing Leap-related mobile menu conflicts, please log in via https://support.ezoic.com/ to make use of our dedicated resources for support. We're here to help!