Before you copy and paste the following codes, I recommend you create a child theme and copy/paste these codes to the files in your child theme.

This tutorial is in three parts and guides you through each step:

1. Add PHP code to your functions.php
2. Add CSS code to your style sheet file
3. Add JS script to your custom script file

The function

Firstly, copy and paste this code to your functions.php file. This will add the search form to the menu. In this case, I chose ‘top’ menu as location for my search form.

/**
 * Add custom search form to your navigation
 *
 * @since text domain 1.0
 */
add_filter('wp_nav_menu_items', 'nav_header_search_form', 10, 2);
function nav_header_search_form($items, $args) {
	if( $args->theme_location == 'top' )
       $items .= '<li class="nav-search"><a class="nav-search-icon"></a><div style="display:none;" class="nav-searchform-container"><div class="nav-search-box">'. get_search_form(false) .'</div></div></li>';
       return $items;
}

Make sure to edit the following line.

if( $args->theme_location == 'your-theme-location' ) // Add your location here

The styling

Once the search form appears on your menu, add the following CSS code to your style sheet.

.nav-searchform-container {
   width: 345px;
   background: #fff;
   border: 1px solid #ededed;
   display: none;
   padding: 5px;
   position: absolute;
   top: 35px;
   right: 0;
   z-index: 99999;
}

.nav-search-box .searchform {
   display: block;
   position: relative;
   margin: 0;
   padding: 0;
   overflow: hidden;
}

.nav-search-box .searchform input[type="submit"],
.nav-search-box .searchform #searchsubmit {
   position: absolute;
   top: 0;
   right: 0;
   color: #fff;
   font-weight: 600;
   width: 50px;
   height: 35px;
   line-height: 30px;
   padding: 0;
   margin: 0;
}

.nav-search-box .searchform input[type="submit"]:focus {
   outline: none;
}

.nav-search-box .searchform input#s {
   display: block;
   float: left;
   height: 35px;
   margin: 0;
   padding: 10px 85px 10px 10px;
   color: #515151;
   background: #f1f1f1;
}

.nav-search-box .searchform input#s:focus {
   outline: none;
}

.nav-search {
   float: right;
}

.nav-search-icon::before {
   content: '\f002';
   cursor: pointer;
   display: inline-block;
   font-family: 'FontAwesome';
}

.nav-search-icon.nav-search-close::before {
   content: '\f00d';
   cursor: pointer;
   width: 10px;
   display: inline-block;
   font-family: 'FontAwesome';
}

The script

Finally, we are going to add the script to run the toggle effect. This script will also add class for the close icon on our search form.

/**
 * Toggle effect and close icon class
 */
jQuery(document).ready(function(){
	jQuery(".nav-search-icon").click(function() {
		jQuery(".nav-searchform-container").toggle('fast');
		jQuery(this).toggleClass("nav-search-close");
	});
});

That’s it!