Search box in overlay Search box

Hey Federica,

Thank you for the inquiry.

Did you add the following snippet in the functions.php file? This should create a search field within the mobile menu container when the mobile menu icon is clicked.

// https://kriesi.at/support/topic/search-box-in-mobile-menu-2/#post-1277234

Best regards,
Ismael

Hi,

Thank you for the info.

According to the error in the screenshot, the avf_add_search function is already declared or has been duplicated. You have to remove the previous avf_add_search function from the functions.php file.

Best regards,
Ismael

Hi,

The avf_add_search function is already added in the functions.php file, so the error occurs because you are trying to duplicate the function. You have to remove the previous avf_add_search function first. After removing any instances of the avf_add_search function from the functions.php file, try to add the following snippet.

// https://kriesi.at/support/topic/search-box-in-mobile-menu-2/#post-1277234

Best regards,
Ismael

Hi,

We edited the functions.php file and adjusted the script a bit for the new mobile menu.

// add search bar to mobile menu
function ava_custom_script_mod_search_mobile()
{
?>
	<script>
		(function($) {
			$(document).ready(function() {		
				var page   = window.location.href;
				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>';
	
				$('.av-burger-menu-main a').on('click', function() {
					if($(".av-mobile-search").find('form').length == 1) return;
					setTimeout(() => {
						$("<div class='av-mobile-search'>" + search + "</div>").prependTo('#av-burger-menu-ul');
					}, 300);	
				});
			});
		})(jQuery);
	</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod_search_mobile', 10000);

The search bar is now added above the mobile menu items but it will require a bit of css modification. You can start with the following.

.av-mobile-search div {
    position: relative;
}

Best regards,
Ismael

Hi,

Thank you for following up. Glad to know that the modification is working.

To move the search form before the CHI SIAMO menu item, try to replace the script with the following.

// add search bar to mobile menu
function ava_custom_script_mod_search_mobile()
{
?>
	<script>
		(function($) {
			$(document).ready(function() {		
				var page   = window.location.href;
				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>';
	
				$('.av-burger-menu-main a').on('click', function() {
					if($(".av-mobile-search").find('form').length == 1) return;
					setTimeout(() => {
						$("<li class='av-mobile-search av-active-burger-items'>" + search + "</div>").insertAfter('.menu-item-178580');
					}, 300);	
				});
			});
		})(jQuery);
	</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod_search_mobile', 10000);

Best regards,
Ismael

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard