Create a search bar that overlays your top navigation

Is it possible to replace the standard AJAX search with a search box that takes over the secondary sub menu?

Example I’m trying to achieve below using the enfold theme.

https://www.solodev.com/blog/web-design/search/how-to-create-a-search-bar-that-overlays-your-top-navigation.stml

Currently I have the AJAX search in place below. I want to take it one step further that when the search button is pressed it will over lay across the secondary menu. For a mobile user also this will look better then the standard ajax solution.

/* Header Meta Search Icon */
if(!function_exists(‘avia_append_header_meta_search_icon’))
{
//first append search item to main menu
add_filter( ‘wp_nav_menu_items’, ‘avia_append_header_meta_search_icon’, 9997, 2 );
add_filter( ‘avf_fallback_menu_items’, ‘avia_append_header_meta_search_icon’, 9997, 2 );

function avia_append_header_meta_search_icon( $items, $args )
{
if (is_object($args) && $args->theme_location == ‘avia2’)
{
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”>
<span class=”avia_hidden_link_text”>’.__(‘Search’,’avia_framework’).'</span>
‘;
}
return $items;
}
}