Beaver Themer Sticky Header Overlay Flyout

overlay.css

/* # Overlay
---------------------------------------------------------------------------------------------------- */

.admin-bar .overlay {
	top: 150px; /* Header + admin bar  - in this case 128px + 32px */
}

/* See the Overlay in BB editing mode */
.fl-theme-layout-template-default .overlay {
	height: auto;
        width: auto;
	position: relative; 
	right: 0;
	top: 0;
	z-index: 0;
	overflow-y: visible;
}

/* The Overlay (background) how it appears when toggled*/
.overlay {
 /* Height & width depends on how you want to reveal the overlay (see JS ) */    
	height: 0; /* Height of overlay controlled in JS */
	width: 100%;
	position: fixed; 
	z-index: 1; /* Sit on top */
	right: 0;
	top: 128px; /* How far from the top of the page to appeat - here the header is fixed at 128px */
	background-color: rgba(255,255,255, .9); /* Overlay bg */
	overflow-y: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


.overlay .fl-row-fixed-width {
	max-width: none;
}

.open-close-flyout {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

.overlay-close {
	display: none;
	font-size: 30px;
	line-height: 1;

}
.overlay-active .overlay-but{
	display: none;
	line-height: 1;
}

.overlay-active .overlay-close  {
	display: inline-block;
	position: relative;
}

overlay.html

<!-- So below is the trigger button - for the overlay contant add the .overlay CSS class - this content sits adjacent to the main header -->
<div class="main-header">
 <!-- other code -->
    <div class="open-close-flyout"> 
        <button class="overlay-but">Menu</button>
        <a href="#" class="overlay-close">&times;</a>
    </div>
</div>

<div class="overlay">
 <!-- code -->

</div>

overlay.js

(function($){
	
	$(function() {
        
		openOverlay();
		closeOverlay();
        
    });

    function openOverlay() {
        
		$('.overlay-but').on('click', function() {

		$('body').addClass('overlay-active');
		$('.overlay').css("height",  "100vh");

		return false;
        
        });
    }

    function closeOverlay() {

		$('.overlay-close').on('click', function() {

		$('body').removeClass('overlay-active');
		$('.overlay').css("height",  "0%");

		return false;

        });
    }

})(jQuery);