searchfield in menu

hm – yes but this was meant for main-menu on left or right position.
but i think there will be now a better solution – just a moment …

put this in your child-theme functions.php:

add_shortcode('avia_search', 'get_search_form');

function avf_add_search( $items, $args ){
  if ($args->theme_location == 'avia'){
	  $search = '<li id="menu-item-search" class="menu-item menu-search menu-item-top-level">';
	  $search .= do_shortcode('[avia_search]');
	  $search .= '</li>';
    $items =  $items . $search;
  }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'avf_add_search', 10, 2 );

and this to your child quick css:

.av-main-nav-wrap > ul:first-of-type {
  display: inline-flex !important;
  height: 100%;
}

#menu-item-search {
  line-height: 30px;
  position: relative;
}

#menu-item-search #searchform {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  line-height: 40px;
}

#top #searchform > div:first-of-type {
  position: relative;
  max-width: 200px;
  opacity: 1 !important;
  display: block !important;
}

#menu-item-search #searchform #s {
  padding: 10px 40px 10px 5px;
  font-size: initial;
  background-color: rgba(255,255,255,0.85);   /*** if you like to have transparency ***/ 
}

#top #searchform .ajax_search_response {
  background-color: rgba(255,255,255,0.85);
  position: absolute;
  top: 45px;
  padding: 10px 0;
  width: 100%;
}

/******* if you got  transparency option ******/
#header.header_color.av_header_transparency #avia-menu #menu-item-search #searchform #s {
  background-color: rgba(255,255,255,0.35);
  color: #FFF !important;
}
#header.header_color.av_header_transparency #avia-menu ::placeholder {
  color: #FFF !important;
}
/*** end of transparency header setting ***/

and by the way – if you like to have search input field on hamburger too – we can use that ID set above ( on hamburger the IDs will change to classes)

you need this additional snippet just under the above inserted:

function add_search_to_burger_menu(){
?>
<script type="text/javascript">
(function($) {
	$('.av-burger-menu-main').one('click', function() {
		var page = window.location.href;
		var mobile = $('.menu-item-search');
		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
}
add_action('wp_footer', 'add_search_to_burger_menu');

and a bit of additional css in quick css:

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

#top #av-burger-menu-ul #searchsubmit {
  height: 45px;
}

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

#av-burger-menu-ul .ajax_search_response {
  background-color: #efefef;
  border: 1px solid #ddd;
  padding-top: 20px;
}

#av-burger-menu-ul .ajax_search_response > a {
  padding: 10px 12px 20px !important
}

See Results on : https://enfold.webers-webdesign.de/

so – zunächst – bitte nicht bei den Enfold Optionen unter “Main Menü” die Option : “Append Search Icon To Main Menu” auswählen. Das wäre dann nämlich die Lupe.

Wie oben beschrieben das in die child-theme functions.php:

add_shortcode('avia_search', 'get_search_form');

function avf_add_search( $items, $args ){
  if ($args->theme_location == 'avia'){
	  $search = '<li id="menu-item-search" class="menu-item menu-search menu-item-top-level">';
	  $search .= do_shortcode('[avia_search]');
	  $search .= '</li>';
    $items =  $items . $search;
  }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'avf_add_search', 10, 2 );

und das hier in das quick css:

.av-main-nav-wrap > ul:first-of-type {
  display: inline-flex !important;
  height: 100%;
}

#menu-item-search {
  line-height: 30px;
  position: relative;
}

#menu-item-search #searchform {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  line-height: 40px;
}

#top #searchform > div:first-of-type {
  position: relative;
  max-width: 200px;
  opacity: 1 !important;
  display: block !important;
}

#menu-item-search #searchform #s {
  padding: 10px 40px 10px 5px;
  font-size: initial;
  background-color: rgba(255,255,255,0.85);   /*** if you like to have transparency ***/ 
}

#top #searchform .ajax_search_response {
  background-color: rgba(255,255,255,0.85);
  position: absolute;
  top: 45px;
  padding: 10px 0;
  width: 100%;
}

hier kannst du sogar alle Home Varianten durchgehen – passt immer ( unter Home ist das Dropdown )
4 entspricht dann deiner Header Setzung.

https://basis.webers-testseite.de/home4/

next tip:
wenn du im Hamburger Menü nur eines der Untermenüs zeitgleich angezeigt bekommen möchtest:

das hier in die functions.php

function only_one_submenu_open_on_burger(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
	(function($) {
	  $('body').on( 'click touch', '.av-active-burger-items > a', function () {
	    $(this).parent('li').siblings().removeClass('av-show-submenu');
	    $(this).parent('li').siblings().find('ul').slideUp( "fast");
	  });
	  $('body').on( 'click touch', '.av-active-burger-items .av-width-submenu > a', function () {
	    $(this).closest('.sub-menu').siblings().find('li').removeClass('av-show-submenu');
	    $(this).closest('.sub-menu').siblings().find('ul').slideUp( "fast");
	  });
	})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'only_one_submenu_open_on_burger');

in dem Zusammenhang ist eventuell besser wenn du das Menü nicht über die Höhe zentrierst.

#top #av-burger-menu-ul {
  vertical-align: top;
  padding: 150px 0 !important;
}