Has the page layout been changed or is the content on your site not loading in correctly after 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 / pagebuilder tools you are using.

• Critical CSS - Renders Critical CSS into the head tag and lazy loads the stylesheets. This prevents the site from "jumping" when CSS loads slowly. This can sometimes Lead to issues with page layout or content appearing in the wrong location or even not loading at all because the necessary CSS was lazy loaded.
  

• 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.
  

• Minification features - The minification feature optimizes CSS, javascript and HTML files to reduce the file size. Most of the time this will not cause any issues however on rare occasions the minification can remove some important code from the CSS, JS or HTML files that affects your site's layout or content.
  

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 the features mentioned above (Script delay, Critical CSS, Remove unused CSS, minification features) by going to the Leap dashboard > Optimize > Optimization settings > Change settings then toggling off these settings one at a time.

(Note: For the Minification Features you may want to initially just disable Minification entirely to see if this is the cause and then determine which specific minification feature is the issue by disabling the advanced settings one by one afterwards)

Step 3: Preview: Once you have disabled either 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 one or both of the following procedures to fix the menu

(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)

Critical CSS

If it is determined that Critical CSS was the cause of the issue you can simply exclude the CSS file you believe to be the problem.

Finding out what CSS file is the problem can be a bit more difficult and you may want to contact our Leap support team for help here.

However if you want to try this yourself you can open the page with the issue and then disable Critical CSS in Leap and preview the same page so you have a working version of the page side by side with the broken page.

From here you can open Chrome dev tools by pressing F12 , do this for both version of the page.

You can then use the select element tool (highlighted in blue above) to click on the broken parts of the page, select the same elements on the working version too.

Then in devtools make sure you are in the Elements view and you have the styles sub menu open.

(Note: this may be a little hidden and you will need to drag this out to view things easily)

From here you can compare the CSS files that are being loaded on both versions of the site and if you notice a file that is loaded on the working version that is different to what you see on the broken verison this is a pretty good indication of what CSS file needs to be excluded from Critical CSS.

You can go to the exclusion rules section in Critical CSS and create a rule for the CSS file you noticed making sure the rule target is set to URL and the name of the CSS file is correct.

You can now refresh the broken version of the site and hopefully this should then fix the issue.

(Note: You may need to repeat this multiple times to fixes the issue, if you are struggling to find the CSS file you can always contact our support team who will be happy to help)

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 page layout.

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 page layout you are typically looking for CSS files related to the theme)

Minification Features

In the rare occasion we determine the minification settings are affecting your page layout there are several troubleshooting steps:

First we need to determine which of the minification settings is causing the issue.

(Note: Typically with layout issues this is either Minify CSS or Minify HTML)

When we find out which of the minification feature this is we can either disable this entirely or take further steps to optimize the setup.

In the case of Minfy CSS we can apply exclusion rules to exclude certain CSS from being minified:

Here the process is similar to Remove unused CSS / Critical CSS troubleshooting, we need to find out what CSS file(s) need to be excluded.

(Note: if you are unsure about this process you can always contact our support team who can look into that for you)

For Minify HTML there are 5 toggles that allow you to fine tune the HTML minification:

Each of these settings disables a certain aspect of the HTML minification.

(Note: if all are toggled on HTML minification is completely disabled)

• Keep IE Conditional Comments - Preserve IE conditional comments in the HTML.
• Keep Default Attribute Values - Preserve default attributes for tags such as
• Keep End Tags - Preserve end tags such as
• Keep Quotation Marks - Preserve quotation marks around tag attributes such as type='text/javascript'
• Keep Whitespace - Preserve whitespace between inline tags but still collapse multiple whitespace characters into a single whitespace character.

You can simply toggle these on/off until you find a configuration where the issue is resolved, you may need to toggle on multiple 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.