Search icon on left menu

Edit : use the other method – it is much easier to understand Link

you can insert on different ways a search icon to the navigation via child-theme functions.php

f.e:

add_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );
function avia_append_search_nav ( $items, $args )
{
    if ((is_object($args) && $args->theme_location == 'avia') || (is_string($args) && $args = "fallback_menu"))
      {
          global $avia_config;
          ob_start();
          get_search_form();
          $form =  htmlspecialchars(ob_get_clean()) ;

          $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                 <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                  <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                 </a>
               </li>';
      }
      return $items;
}

Rest is a little bit of styling via quick css f.e. that little white arrow etc.

read here somthing in additon: https://kriesi.at/documentation/enfold/search/

for example to use instead relevansi search

on the first link ( with only the zoom glass) :
on hamburger case you can force both besides each other with some css like:

@media only screen and (max-width: 989px) {
  .responsive.html_header_sidebar #header .av-main-nav > li {
    margin: 0;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top .av-main-nav .menu-item-avia-special {
    float: left;
  }
}

the styling of the active input field on non-hamburger case can be done too with css in quick css – but we had to know how it should look like for you.
f.e. the width and that little arrow pointing to the magnifier etc:

.avia-search-tooltip {
  width: 250px;
}

.avia-search-tooltip .avia-arrow-wrap {
  left: 10%;
}