Remove the default Mobile Menu in Beaver Builder Theme

Here is how to remove the default mobile menu from the Beaver Builder Theme – you may need to do so as you want to use another plugin or simply don’t need it.

Add some Jquery

(function($){
$('.fl-page-header').removeClass('fl-page-nav-toggle-visible-mobile fl-page-nav-toggle-icon');
$('.navbar-toggle').remove();
})(jQuery);
view raw remove-mobile.js hosted with ❤ by GitHub

Adjust the CSS

@media (max-width: 768px ) {
.fl-page-nav-wrap {
padding-bottom: 0;
}
.fl-full-width .fl-page-nav {
display: table;
width: auto;
}
.fl-page-nav-collapse {
display: block;
visibility: visible;
}
.fl-page-nav-collapse ul.navbar-nav > li {
border: none;
float: left;
}
}
view raw remove-mobile.css hosted with ❤ by GitHub

Fire the Jquery

add_action( 'wp_enqueue_scripts', 'bt_remove_mobile_menu' );
/**
* Remove Mobile Menu.
* @link https://pro.wpbeaverworld.com/disables-responsive-menu-effect-small-device/ original reference
*/
function bt_remove_mobile_menu() {
wp_enqueue_script( 'remove-mobile-menu', FL_CHILD_THEME_URL . '/js/remove-mobile.js', array(), '1.6.1', true );
}
view raw remove-mobile.php hosted with ❤ by GitHub

Source/Ref

 

 

Leave a Comment