Using Ajax Search Lite/Pro with Max Mega Menu

AJAX Search Lite / Pro is a live search plugin for WordPress. Using the “Replacements” functionality in Max Mega Menu Pro it is possible to display the search bar directly within the menu.

Step 1: Ajax Search Setup

Make sure the “Search box width” is set to a fixed width value, e.g. 200px (do not use a percentage based value).

Step 2: Max Mega Menu setup

Make sure the “Reset Widget Styling” option is unchecked:

Step 3: Menu Structure

Create a new Custom Link menu item and add it to the menu (it does not matter what you set the “URL” and “Link Text” to).

Save the menu structure.

Step 4: Mega Menu Settings

Hover over the new menu item and click the blue “Mega Menu” button:

Go to the “Replacements” tab and set the following:

  • Type: HTML
  • Mode: Replace the whole menu item link
  • HTML: Paste in the Ajax Search Lite/Pro shortcode (found on the Ajax Search Lite/Pro settings page)

End Result

The search box can be floated to the right of the menu using the “Menu Item Align” option. The position and styling of the search box can be further modified using the options within the Ajax Search plugin settings.

Related Articles