Predictive Search form in header

Hi,
I installed the WooCommerce Predictive Search plugin and they have help me position the plugin’s search bar using a widget I created in in my header.
They provided the following modifications to the following code snippet:

// Add a widget area to the header
add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
dynamic_sidebar( 'header' );
}
// Add meta_header
add_action( 'ava_after_main_menu', 'avia_meta_header_woo_tax' );
function avia_meta_header_woo_tax() {
	echo '<style>#header_main .widget_products_predictive_search{padding: 0px;z-index: -1;}
	.custom_header_search_bar{width: 100%; max-width: 360px; float: right; margin-right: 160px;}
	@media screen and (max-width: 959px){
		.custom_header_search_bar{float: none; margin: 10px auto 0;}
	}
	</style>';
	echo '<div class="custom_header_search_bar">';
dynamic_sidebar( 'meta-header' );
	echo '</div>';
}

Because the main menu items were being covered by the search bar, I added the z-index: -1. I allowed the dropdown menu to show, but now I can’t use the search bar.

Can you help me figure out how to place the search bar so I can still use my dropdown menu and search bar at the same time.

My website is in development and for you to view it, have included access credentials below.

Thanks
Lyse