menu overlapping page content on tablet

Hey!

I have added this code in your Quick CSS (located in Enfold > General Styling):

.html_header_top.html_bottom_nav_header .main_menu>div, .html_header_top.html_bottom_nav_header .main_menu ul:first-child {
    height: auto !important;
}

.html_header_top.html_bottom_nav_header .main_menu ul#avia-menu:after {
  content: "";
  display: table;
  clear: both;
}

This is to make the height of the menu flexible. And have added this code in functions.php:

function adjust_header(){
?>
<script type="text/javascript">
(function($){
	function adjust_header() {
		var $header_height = $("#header").height();
		jQuery("#main").css({"padding-top": $header_height + "px"});
	}

	adjust_header();
})(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'adjust_header');

To adjust the padding based on the height of the header, to test this you need to resize the browser then refresh the page since the code only runs when the page is being loaded. Let us know if this is good on your end.

Cheers!
Nikko