Is your search bar not loading or functioning as expected when you enabled Leap? There are a few potential causes and fixes for this so you can keep Leap enabled and benefit from the optimization this provides.

Potential causes

• Script delay - This tool defers the loading of scripts in order to improve loading times, however some scripts must not be delayed or this can break site functions like search bars. This happens because Leap delays the script(s) necessary for the search to load. The scripts in question will depend on the Theme / page builder tools you are using.
  

• Remove unused CSS - The Remove unused CSS feature tries to detect unused CSS files and then prevents them from being loaded to improve loading times for the necessary files and content. Sometimes Leap incorrectly removes the necessary CSS file to load the menu because our system sees it as unused. This is because the CSS file is not needed to load the actual page and is only used when the search bar is loaded.

Firstly you will need to determine if this is indeed caused by Leap and 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 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 > Optimization settings > Change settings then toggling off these settings one at a time.

Step 3: Preview: Once you have disabled either of the settings go to the preview and see if the Search bar is working. Depending on which feature needs to be disabled you will need to follow the appropriate procedure to fix the search bar.

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

Script Delay

So we have narrowed this down to being caused by script delay. The next step is to find out what scripts need to be excluded from being delayed in order for the search bar to function correctly.

The Script Delay feature offers multiple options to assist you with excluding scripts you do not want the feature to impact. The simplest option is to use the Find delayed Scripts Tool that can be found as an option within the script delay setting here:

The Delayed Scripts tool allows you to quickly view a list of the external and inline scripts found on a specified URL that the Script Delay feature will delay. Simply Click the “Clear Scripts” button then enter the URL for the page you are troubleshooting in the “Find Scripts on URL” section and press the ↵ Enter key (Note: For a menu this can really be any page on your site)

Once the list is generated, you can easily choose which scripts you wish to include in the URL rules for Script Delay by selecting Yes/No.

Scripts marked ‘No’ will be added to the URL rules for the tool and will no longer be delayed.

Scripts marked ‘Yes’ will remain delayed by the Script Delay feature unless changed by the user.

(Note: Our system will highlight potentially troublesome scripts in yellow which can help you when trying to determine what scripts may be causing issues on your site)

The most common scripts that need to be excluded for search bars are scripts related to the theme you are using. To quickly narrow these down you can enter the name of your theme or just “theme” into the search bar and this will filter the list of scripts to only show relevant scripts.

From here you can use trial and error to exclude scripts one by one and then preview the site to see if this fixes the issue.

(Note: you may need to exclude multiple scripts in order for the menu to work)

If you are using a page builder like Elementor, this process will likely not work even if you exclude every script from being delayed, in this case you would need to completely disable script delay.

(Note: this is very bad for site speed and ultimately you should consider moving away from using page builders like Elementor as they are notorious for bloating out site and making it very difficult to optimize scripts and CSS)

Remove Unused CSS

In the case where we have determined Remove Unused CSS is the cause of the issue, we will need to exclude the necessary CSS files from being removed in order to fix the search bar.

We do this by using the Find Style Sheets Tool, you can find this in the Remove Unused CSS options here:

This tool is similar to the Find delayed scripts tool, you can search a URL and view the CSS files that are being detected on that page. These files will be listed and by selecting Yes/No you can include or exclude these files from potentially being removed by Leap.

(Note: This may take some trial and error to find the right combination of files to exclude, for search bars you are typically looking for CSS files related to the theme)

You will know when this is successful because you will be able to see the search bar functioning correctly when previewing your Leap settings.

By following these troubleshooting steps you should be able to resolve most search bar functionality issues. If you are still struggling after following these steps then please open a Leap support ticket via your Leap dashboard here:

Our Leap support team will be able to look into this further and if necessary escalate the issue to our engineers in order to resolve the issue.