Disables the responsive menu effect for small device

Hide Mobile Menu Button

Hiding the responsive menu effect for mobile device is a bad idea. But it would be suitable for those sites who have small menu items. Follow the instructions at below:

Method 1:

Enqueue new JS file

Creates a new folder “js” inside your BB child theme folder and put this new js file “remove-mobile-menu.js” there. Here is the full code of this JS file

	$('.fl-page-header').removeClass('fl-page-nav-toggle-visible-mobile fl-page-nav-toggle-icon');


Above codes are removing the mobile menu button and some predefined CSSs.

Now open the functions.php file and equeue this JS file on your site.

add_action( 'wp_enqueue_scripts', 'frame_remove_mobile_menu' );
function frame_remove_mobile_menu()
	wp_enqueue_script( 'remove-mobile-menu', FL_CHILD_THEME_URL . '/js/remove-mobile-menu.js', array(), '1.6', true );


Adds some custom CSS code

Needs some custom CSS for menu alignment. By default menu is coming vertically on small devices. We are showing it horizontally. So open the style.css file on editor and add these new 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.collapse {
		display: block!important;
		visibility: visible!important;

	.fl-page-nav-collapse ul.navbar-nav > li {
		border: none;
		float: left;

Important Note: Above codes are tested on BB parent theme 1.6

Method 2: Using Menu Module

If you are creating the header using the BB template or Beaver Themer with menu module, you will disable the “Responsive Toggle” option. Select “none” from drop down list.

Next open the style.css file and drop this small CSS codes there.

@media (max-width: 768px ) {

	header.fl-builder-content .fl-menu,
	header.fl-builder-content .fl-menu ul.menu {
		text-align: center;

	header.fl-builder-content .fl-menu ul.menu > li {
		display: inline-block;

	header.fl-builder-content .fl-menu ul.sub-menu {
		position: absolute;
		z-index: 9999;

	header.fl-builder-content .fl-menu ul.sub-menu > li {
		text-align: left;



  1. Richard on March 22, 2018 at 4:03 am

    Just tried this and it worked perfectly as is. Awesome.

    Cheers, Richard

  2. […] Source/Ref […]

  3. Johannes on June 2, 2017 at 1:03 pm

    Is it safe to send here? Shall I send it from your contact page?

    • WP Beaver World on June 2, 2017 at 1:11 pm

      Via contact page.

  4. Johannes on June 2, 2017 at 12:35 pm

    Thank you for this, but I have problems:

    Hi, I am using Method 2 and add the CSS code. The hamburger disappear ( as it shall ) and shows the menu vertically aligned. It shall be horizontal. Can you help?


    Pls do not show the website

    • WP Beaver World on June 2, 2017 at 12:45 pm

      Can you share the site access of this demo site? So I can take a look and solve the issue for you.

Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials