Create a content flyout overlay in Beaver Themer Layout Header
This is a starter guide to get you up and running with an overlay flyout on click of hidden content in Beaver Builder – there is nothing indeed Beaver Builder specific about it other than it’s easy to build the overlay content within the builder itself, display it normally in the BB editing screen but show/hide the overlay content public view.
This can easily be applied to any theme framework.
There are design factors in how each header behaves in tablet and mobile size, so the guide will work well in desktop but depending on your content you will have to add some more CSS Media Queries for your layouts to work at the smaller sizes.
The guide gives some JS and CSS code which you can add to the in-built Beaver Themer layout JS and CSS tabs and these will output to wherever you display the Themer header.
There are some modules in the BB ecosystem that already to flyouts and overlays but they tend to be just for menus – this allows for content to be included from any BB module available.
Attached at the end is also the template file which you can directly import with all the code.
https://gfycat.com/SnoopyBossyBittern
Create a Beaver Themer header layout make it sticky and create 2 rows one is the actual header and the second is the flyout, give the second row a CSS class of .overlay
Populate both rows with your content.
Open/close toggle content button
In the actual header you need to create a button/link trigger that toggles the flyout – this HTML block example is used.
<div class="open-close-flyout">
<button class="overlay-but">Menu</button>
<a href="#" class="overlay-close">×</a>
</div>
In the animated example the button is a HTML module in the third column in the main header, here you may not want a button, instead, an icon, change the markup appropriately.
Add in the Javascript
(function($){
$(function() {
openOverlay();
closeOverlay();
});
function openOverlay() {
$('.overlay-but').on('click', function() {
$('body').addClass('overlay-active');
$('.overlay').css("height", "100vh"); // Set the height you want the overlay to take over the viewport you can use px, % etc
return false;
});
}
function closeOverlay() {
$('.overlay-close').on('click', function() {
$('body').removeClass('overlay-active');
$('.overlay').css("height", "0%"); // When closed there is zero height
return false;
});
}
})(jQuery);
Things to change in the JS is the viewport height of the overlay – the initial click will create the height 100vh and the second click will remove the height 0%
Add in the CSS
/* 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 {
font-size: 30px;
line-height: 1;
display: none;
}
.overlay-active .overlay-but{
display: none;
line-height: 1;
}
.overlay-active .overlay-close {
display: inline-block;
position: relative;
}
Every layout is different – so the key things to change – first is the height of the header – the header is to stay stuck so the overlay appears positioned below it – 128px in this example – if your header changes height at medium and small sizes then some media queries will be needed.
Also for sticky headers, BB only does the large viewport by default – you can work around that by making sticky headers on tablet and mobile 0r not have it at all on smaller sizes.
Full Screen Overlay
For a full screen overlay and not a header offset you just need a couple of tweaks, change the CSS in the top position in 2 declarations…
.admin-bar .overlay {
top: 32px; /* Admin bar - 32px */
}
.overlay {
top: 0;
}
Then the open/close toggle needs to be split out to the open on the initial load and the close on the overlay.
Header row…
<div class="open-close-flyout">
<button class="overlay-but">Menu</button>
</div>
Overlay content row…
<div class="open-close-flyout">
<a href="#" class="overlay-close">×</a>
</div>
Further CSS adjustment will be needed to get these aligned the way you need.
Controlling the animation to slide in
So far the animation slides down, you can make it slide in from the left of right with a couple of tweaks, adjust the CSS
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(0,0,0,.5);
overflow-y: hidden;
transition: 0.5s;
}
Change the width to be 0 as now that will be controlled in the javascript, change the height to be 100% – set left:0 or right:0 to control the starting slide in side.
Change the javascript…
(function($){
$(function() {
openOverlay();
closeOverlay();
});
function openOverlay() {
$('.overlay-but').on('click', function() {
$('body').addClass('overlay-active');
$('.overlay').css("width", "100%");
return false;
});
}
function closeOverlay() {
$('.overlay-close').on('click', function() {
$('body').removeClass('overlay-active');
$('.overlay').css("width", "0%");
return false;
});
}
})(jQuery);
That’s it – now it will slide in – to change the speed adjust the transition property in the CSS.
If you are not using a full screen overlay you can also animate the toggle transition – further info here.
