Flexible Menu

When there’s only space to display some of the items in the menu, the rest of the items collapse into a “More” drop-down. See the video at below:

Here I am sharing the steps and snippets. Make sure that you already installed the following tools:

1. WordPress
2. Beaver Builder Plugin (Standard/Pro/Agency)
3. Beaver Builder Theme
4. Official BB Child theme or Frame BB Child Theme

And created the site header’s menu bar using the Beaver Menu module.

Creates JS File

Creates a new JS file “flex-menu.js” and put into child theme’s js folder. This JS script is creating the “More” drop down list. Here is the complete code of this JS file

Flex Menu JS file

(function($){

	$(function(){
		
		if( $(window).width() >= FLBuilderLayoutConfig.breakpoints.small )
			alignMenu();

		$(window).resize(function() {
			$(".fl-module-menu .menu").append($(".fl-module-menu .menu li.hideshow ul").html());
			$(".fl-module-menu .menu li.hideshow").remove();
			if( $(window).width() >= FLBuilderLayoutConfig.breakpoints.small ) {
				alignMenu();
			}
		});

		function alignMenu()
		{
			var w = 0;
			var mw = $(".fl-module-menu .menu").width() - 150;
			var i = -1;
			var menuhtml = '';
			jQuery.each($(".fl-module-menu .menu").children(), function() {
				i++;
				w += $(this).outerWidth(true);
				if (mw ').append($(this).clone()).html();
					$(this).remove();
				}
			});

			$(".fl-module-menu .menu").append(
					'
' +
					    '' + l10n.more + ' ' + 
					    '↓' +
					    '
'+ menuhtml + 
					'
'
			);

			$(".fl-module-menu .menu li.hideshow ul").css("top", $(".fl-module-menu .menu li.hideshow").outerHeight(true) + "px");
		}

	});

})(jQuery);

Enqueue the JS Script

Open the functions.php file and add the following PHP snippet. It will load the JS file on your site.

Enqueue the JS File

add_action( 'wp_enqueue_scripts', 'probb_enqueue_script_flex_menu', 1005 );
function probb_enqueue_script_flex_menu()
{
	wp_enqueue_script( 'flex-menu', get_stylesheet_directory_uri() . '/js/flex-menu.js', array(), '1.6.1', true );
	wp_localize_script( 'flex-menu', 'l10n', array( 'more' => __( 'More', 'fl-automator' ) ) );
}

Custom CSS

Need small CSS for alignment. Open the style.css file and add this CSS code at end of the file:
CSS

li.hideshow > ul {
	background: #f3f3f3;
	text-align: left;
	z-index: 9999;
}

li.hideshow > ul > li.fl-menu-submenu-right > .sub-menu {
	left: inherit!important;
	right: 100%!important;
}

li.hideshow > ul > li .sub-menu {
	top: 0!important;
}