A gist for the nav search on Beaver Builder

nav-search.php

<div class="fl-page-nav-search">
	<a href="javascript:void(0);" class="fas fa-search"></a>
	<form method="get" role="search" action="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr_x( 'Type and press Enter to search.', 'Search form mouse hover title.', 'fl-automator' ); ?>">
		<input type="search" class="fl-search-input form-control" name="s" placeholder="<?php echo esc_attr_x( 'Search', 'Search form field placeholder text.', 'fl-automator' ); ?>" value="<?php echo get_search_query(); ?>" />
		<a href="#search-close" aria-label="Close search dialog box">
		<i class="fas fa-times"></i>
		</a>
		<script>
			jQuery('a[href="#search-close"]').on('click', function(event) {
				event.preventDefault();
				jQuery('.fl-page-nav-search form').css('display', 'none');
			});
		</script>
	</form>
</div>

<!-- CSS that gets added 
<style>
	.fl-page-nav-search form input,
.fl-page-nav-search form a{
	display: inline;
}

.fl-page-nav-search form input[type="search"] {
	width: 90%;
}

.fl-page-nav-search a {
	margin-left: 10px;
}
</style>
-->

So the idea is that it adds a close icon to the search bar. This is especially helpful if you are adding the search to a mobile header, because otherwise the header is covered and not accessible.