search as part of fly-over menu

Hey amyteslin,

Thank you for the inquiry.

This option is not available out of the box, but you may be able to utilize the same script that we use to create social icons inside the mobile menu. The script can be found here.

// https://kriesi.at/support/topic/add-logo-to-slide-out-mobil-menu/#post-1301439

Just replace this line with the actual markup of the search bar.

$("
<div class='av-mobile-logo'><img src='IMAGE URL HERE' /></div>
")

And remove this part or change it accordingly.

.addClass("mobile_social_bookmarks");

Best regards,
Ismael

Hi,

Thank you for the update.

We cannot see the actual markup of the search bar above. Please post the code on pastebin.com so that we can test it on our end. The code should look something like this.

// add search bar to mobile menu
function ava_custom_script_mod_search_mobile()
{
?>
	<script>
		(function($) {
			$(document).ready(function() {			
				$('.av-burger-menu-main a').on('avia_burger_list_created', function() {
					setTimeout(() => {
						$("<div class='av-mobile-search'>SEARCH HERE</div>").prependTo('#av-burger-menu-ul');
					}, 150);	
				});
			});
		})(jQuery);
	</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod_search_mobile', 10000);

Best regards,
Ismael

Hi,
To add the ajax search icon to the top of the burger menu add this function to your child theme functions.php:

function add_ajax_search_icon_to_burger_menu(){
  ?>
  <script>
(function($){
$('#avia-menu').one('click', function(){
    $('#menu-item-search').clone().wrapInner('<li class="burger_search"/>').children(0).unwrap().prependTo('#av-burger-menu-ul');
    $('#top #wrap_all #av-burger-menu-ul > li').css({'-webkit-transform':'none'});
});
$('#avia-menu').click(function() {
	setTimeout(function(){
	if ($('#av-burger-menu-ul').is(":visible")) {
	$('#menu-item-search').css({'visibility':'hidden'});
	}else{
	$('#menu-item-search').css({'visibility':'visible'});		
	}
	},500);
});
})(jQuery);
</script>
  <?php
  }
  add_action('wp_footer', 'add_ajax_search_icon_to_burger_menu');

Please note that you need to have the search icon enabled in the theme options at Enfold Theme Options ▸ Main Menu ▸ General ▸ Append search icon to main menu
this is the expected results with the burger menu open:

and when the search is used:

Best regards,
Mike

Hi,
The script is written so that when the burger menu is opened the one at the top is hidden and when the burger is closed the one at the top is shown again.
Is it not working for you in this way?
Or do you wish that the header search icon never shows and is only available in the burger menu?

Best regards,
Mike

Hi,
Ok, try using this function instead:

function add_ajax_search_icon_to_burger_menu_no_desktop_search(){
  ?>
  <script>
(function($){
	$('#top #wrap_all #menu-item-search').css({'visibility':'hidden'});
$('#avia-menu').one('click', function(){
    $('#menu-item-search').clone().wrapInner('<li class="burger_search"/>').children(0).unwrap().prependTo('#av-burger-menu-ul');
    $('#top #wrap_all #av-burger-menu-ul > li').css({'-webkit-transform':'none'});
});
})(jQuery);
</script>
  <?php
  }
  add_action('wp_footer', 'add_ajax_search_icon_to_burger_menu_no_desktop_search');

Please note that you still need to have the search icon enabled in the theme options at Enfold Theme Options ▸ Main Menu ▸ General ▸ Append search icon to main menu

Best regards,
Mike

Hi Vera,

Great, I’m glad that Mike could help you out :-)

Best regards,
Rikard