Getting Off Canvas Menu on Beaver Builder Theme
<
Do you want to add the off canvas menu on your site? This tutorial helps you. You need Beaver Builder Theme 1.6 or later version. See the steps at below:
Enable the Mobile Menu for Desktop
First enabling the Hamburger icon for desktop and all devices. Login to Dashboard and navigate to Appearance -> Customize page. Go to Nav Layout section (Header -> Nav layout) and select “Always” from Responsive Nav Breakpoint drop down list. Click on Save&Publish button and save the current settings.
Creating Off Canvas Menu JS file
Creates a new folder “js” inside the bb child theme folder. You can ignore it if it is already there. Creates a new JS file “off-canvas-menu.js” and put into the “js” folder. Here is the full code of this JS file
Off Canvas Menu JS file
(function($){
$(function(){
$('body').addClass('off-canvas-menu');
var winHeight = $(window).height();
$('.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .fl-page-nav-collapse').css({'min-height': winHeight})
.prepend('' );
$( '.fl-page-nav-collapse ul.navbar-nav > li > .sub-menu' ).before(
$( '', {
'class' : 'sub-menu-toggle',
'aria-expanded' : false,
'aria-pressed' : false,
'role' : 'button'
} )
.append( $( '', {
'class' : 'screen-reader-text',
text : menuL10n.sunMenu
})
)
);
$( 'button.sub-menu-toggle' ).on( 'click', function(){
$(this).toggleClass('activated');
$(this).prev().parent().toggleClass('fl-mobile-sub-menu-open');
});
$(window).resize(function(){
var winHeight = $(window).height();
$('.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .fl-page-nav-collapse').css({'min-height': winHeight});
$('.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .fl-page-nav-collapse').removeClass('in').addClass('collapse');
});
$(window).scroll(function(){
$('.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .fl-page-nav-collapse').removeClass('in').addClass('collapse');
});
});
})(jQuery);
Enqueue this JS file
Open the functions.php file and add this code at end of the file
Enqueue JS file
add_action( 'wp_enqueue_scripts', 'frame_enqueue_scripts', 1001 );
function frame_enqueue_scripts()
{
wp_enqueue_script( 'oc-menu', FL_CHILD_THEME_URL . '/js/off-canvas-menu.js', array(), '1.6', true );
$output = array(
'subMenu' => __( 'Menu', 'fl-automator' ),
);
wp_localize_script( 'oc-menu', 'menuL10n', $output );
}
Customize the Design
Adding some custom CSS code for professional look. Open the style.css file and drop this CSS there
CSS
/* off Canvas Menu
----------------------------------------------------------- */
body.off-canvas-menu {
overflow-x: hidden;
}
body.off-canvas-menu .fl-page-nav-collapse::-webkit-scrollbar {
width: 5px;
}
body.off-canvas-menu .fl-page-nav-collapse::-webkit-scrollbar-track {
background: #ddd;
border-radius: 5px;
}
body.off-canvas-menu .fl-page-nav-collapse::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #bbb;
}
body.off-canvas-menu .fl-page-nav-collapse i.fa-close {
background: #ebebeb;
border-bottom: 1px solid #e6e6e6;
color: #333;
cursor: pointer;
display: block;
margin: -25px -25px 30px;
padding: 20px;
text-align: right;
}
body.off-canvas-menu .fl-page-nav-collapse i.fa-close:hover {
color: #636363;
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always {
z-index: 10;
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always.fl-page-nav-right .fl-page-nav .navbar-toggle,
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always.fl-page-nav-left .fl-page-nav .navbar-toggle {
top: 50%!important;
margin-top: -17px;
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always.fl-page-nav-right .fl-page-header-row .fl-page-header-logo,
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always.fl-page-nav-left .fl-page-header-row .fl-page-header-logo {
padding-bottom: 0;
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .fl-page-nav-collapse {
background: #eee;
display: block;
height: 100%!important;
overflow-x: hidden;
overflow-y: auto!important;
padding: 25px;
position: fixed!important;
top: 0px;
width: 320px;
z-index: 9999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
right: 0;
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .fl-page-nav-collapse ul.navbar-nav li {
text-align: left;
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .fl-page-nav-collapse.in {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
@media (max-width: 480px) {
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .fl-page-nav-collapse,
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-medium-mobile .fl-page-nav-collapse {
width: 280px;
}
}
/* Sub Menu Indicator */
.fl-submenu-indicator .fl-page-nav ul.navbar-nav > li.menu-item-has-children > a:after {
display: none!important;
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .nav > li > a {
display: inline-block;
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .sub-menu-toggle {
background: transparent;
border-width: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
display: block;
margin: 0 auto;
float: right;
overflow: hidden;
padding: 10px 15px;
position: absolute;
right: 0;
top: 3px;
text-align: center;
visibility: visible;
z-index: 9999;
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .sub-menu-toggle:hover,
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .sub-menu-toggle:focus {
border-width: 0;
color: #428bca;
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .sub-menu-toggle:before {
content: "f107";
display: inline-block;
font: normal 16px/1 'FontAwesome';
text-rendering: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .sub-menu-toggle.activated:before {
content: "f106"!important;
}
All setup are completed now. Refresh you home page and see the output.
Here is the LESS script of above CSS code. It is only for LESS developer
LESS
/* off Canvas Menu
----------------------------------------------------------- */
body.off-canvas-menu {
overflow-x: hidden;
.fl-page-nav-collapse {
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: #ddd;
border-radius: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #bbb;
}
i.fa-close {
background: #e6e6e6;
border-bottom: 1px solid #ddd;
color: #333;
cursor: pointer;
display: block;
margin: -25px -25px 30px;
padding: 20px;
text-align: right;
&:hover {
color: #999;
}
}
}
}
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always {
z-index: 10;
&.fl-page-nav-right,
&.fl-page-nav-left {
.fl-page-nav .navbar-toggle {
top: 50%!important;
margin-top: -17px;
}
.fl-page-header-row .fl-page-header-logo {
padding-bottom: 0;
}
}
.fl-page-nav-collapse {
background: #efefef;
display: block;
height: 100%!important;
overflow-x: hidden;
overflow-y: auto!important;
padding: 25px;
position: fixed!important;
top: 0px;
width: 320px;
z-index: 9999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
right: 0;
-webkit-transform: translate(100%,0);
-moz-transform: translate(100%,0);
-ms-transform: translate(100%,0);
-o-transform: translate(100%,0);
transform: translate(100%,0);
ul.navbar-nav li {
text-align: left;
}
&.in {
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
}
.sub-menu-toggle {
background: transparent;
border-width: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
color: @frame-nav-link-color;
display: block;
margin: 0 auto;
float: right;
overflow: hidden;
padding: 10px 15px;
position: absolute;
right: 0;
top: 3px;
text-align: center;
visibility: visible;
z-index: 9999;
&:before {
content: "f107";
display: inline-block;
font: normal 16px/1 'FontAwesome';
text-rendering: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
&.activated:before {
content: "f106"!important;
}
&:hover,
&:focus {
border-width: 0;
color: @frame-nav-hover-color;
}
}
}
@media (max-width: 480px) {
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-always .fl-page-nav-collapse,
body.off-canvas-menu .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-medium-mobile .fl-page-nav-collapse {
width: 280px;
}
}
Posted in Beaver Builder