Hello there,
Thank you for getting in touch here.
In order to achieve that objective, could you please try to do the following?
- Paste this code in the most bottom line of child theme’s functions.php file
/*
* 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;
}
If you haven’t been running a child theme yet, you would need to download the Sydney child theme here. Unzip, then open the style.css file, replace Template: sydney to Template: sydney-pro-ii.
- Paste this code in the child theme’s style.css file
.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: 3px 5px 3px 23px;
font-weight: normal;
}
.top-search-menu label:before{
color: #fff;
}
.top-search-menu.input-expanded label:before{
color: #333;
}
.top-search-menu input{
opacity: 0;
width: 0;
}
.top-search-menu.input-expanded input{
opacity: 1;
width: 140px;
}
- Install and activate the Header and Footer Scripts plugin
- Go To Settings > Header and Footer Scripts panel
- Paste the following code into the provided Scripts in footer box
<script>
(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);
</script>
- Save settings
Regards,
Kharis
