As you can guess, everything starts with a handy plugin called Ivory Search (Add Search To Menu).

Here it is:

https://wordpress.org/plugins/add-search-to-menu/

Upon activation go to Ivory Search => Settings in your WordPress admin area.

This is where you can configure your search bar.

As a first step you need to select the menu where you want to display search form:

The next two options will allow you to select a search form template and a form style, but these features are not available in the free version of the plugin.

The next step is to define the search menu title:

Next, you can add menu classes as search navigation menu items, you can display a "Close Search Form" icon, etc. You can play around with all these settings according to your needs.

Finally, you need to click the green "Save" button to save your settings.

Next, select the "Settings" tab.

The first two options will allow you to display the search bar in your header and/or your footer. Make your choice(s) and select a search form:

And you will have a bunch of other options to configure & define mobile display, custom CSS, stopword list, synonyms, etc.

And once again, don't forget to click the "Save" button!

And that's it!

Here's the result:

OK. Let's move forward to the next lesson where I will show you how to create your own customized search form.