Search in mobile hamburger menu

Hey pgsmarketing,

Could you post a link to the site in question so that we can take a closer look please?

Best regards,
Rikard

Hi,

Thank you for the info.

We need to include a placeholder for the search form inside the mobile menu. Add this code in the functions.php file.

add_filter( 'wp_nav_menu_items', 'avf_add_search', 9999, 2 );
function avf_add_search( $items, $args ) {
	if ($args->theme_location == 'avia')
	{
		$search = '<li id="menu-item-search-mobile" class="menu-item"></li>';
		$items = $search . $items;
	}
	return $items;
}

And then dynamically create the search form and append it to the mobile search container.

add_action('wp_footer', 'avf_add_search_script');
function avf_add_search_script(){
?>
<script type="text/javascript">
(function($) {
	$('.av-burger-menu-main').on('click', function() {
		var page   = window.location.href;
		var mobile = $('.menu-item-search-mobile');
		var search = '<form action="'+page+'" method="get" class=""><div><input type="submit" value="" id="searchsubmit" class="button avia-font-entypo-fontello"><input type="text" id="s" name="s" value="" placeholder="Search"></div></form>';

		setTimeout(function() {
			if(mobile.find('form').length == 1) return;
			mobile.html(search);
		}, 500);		
	});
})(jQuery);
</script>
<?php
}

Lastly, add this code in the Quick CSS field.

#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.menu-item-search-mobile {
  padding: 0 30px;
  position: relative !important;
}

#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.menu-item-search-mobile form {
  position: relative !important;
}

Best regards,
Ismael