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
Go to Ajax Search Lite > Layout options > Search Box layout & Theme and make sure the “Search box width” (desktop) 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 at the top of the Ajax Search Lite/Pro settings page, e.g. [wpdreams_ajaxsearchlite])
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.