Add search menu on the main menu items with magnifying glass show/hide effect

search-menu.txt

== PHP snippet == 

/*
 * Add a search form to menu navigation
 */
add_filter('wp_nav_menu_items', 'sydney_child_add_serch_from_to_nav', 10, 2);
function sydney_child_add_serch_from_to_nav($items, $args){

  if ($args->theme_location == 'primary') {
      $items .= '<li class="top-search-menu">'.get_search_form(false).'</li>';
  }
  return $items;

}

== Custom JS ==

(function($){

    "use strict";

    var $searchArea = $('.top-search-menu');

    $searchArea.click(function(){
      $(this).addClass('input-expanded');
    });

    $(document).mouseup(function (e){

        var container = $(".top-search-menu");

        if (!$searchArea.is(e.target) && $searchArea.has(e.target).length === 0){
          $searchArea.removeClass('input-expanded');
        }

    });

})(jQuery);	

== Custom CSS == 

.top-search-menu {
  padding-left: 0;
}

.top-search-menu .search-submit{
  display: none;
}

.top-search-menu label{
  position: relative;
}

.top-search-menu label:before{
  font-family: FontAwesome;
  content: '\f002';
  display: inline-block;
  display: block;
  width: 26px;
  height: 26px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 5px;
}

.top-search-menu .search-field{
  height: 26px;
  padding: 15px 5px 15px 5px;
  font-weight: normal;
}

.top-search-menu label:before{
 color: #fff;
}

li.top-search-menu {
	 position: relative;
	 max-width: 20px;
}
 li.top-search-menu label {
	 position: absolute;
	 top: -3px;
	 left: 0;
}
 li.top-search-menu label:before {
	 color: #fff !important;
}
 li.top-search-menu.input-expanded {
	 display: block;
}
 li.top-search-menu.input-expanded form input.search-field {
	 display: block;
}
 li.top-search-menu form {
	 width: 200px;
	 position: absolute;
	 top: 0;
}
 li.top-search-menu form input.search-field {
	 margin-top: 34px;
	 display: none;
}