Combine Top Bar Menu with Header Menu

Do you want to combine the top bar menu items into header menu items for mobile device in Beaver Builder Theme? Top bar menu of BB theme is not looking good on small device. In this article I am showing how you will combine it with toggle menu items.

Enabling the Top Bar and Adding the Menu

At first I am enabling the top bar on the site. Login to Dashboard and navigate to Appearance -> Customize page. Click on Header -> Top Bar Layout and select the “1 Column” or “2 Columns” option from Layout drop down. Select “Menu” option from Column 1 Layout/Column 2 Layout drop down. For my case I setup this

Top Bar Layout

Click on Save&Publish button and save the settings. Now creating a menu and adding it to Top Bar Menu location. Navigate to Appearance -> Menus page, create a new menu (you can use the existing one) and check the “Top Bar Menu” checkbox. See the attached screenshot.

Creates Top Bar Menu

Same way you will create the header layout from Appearance->Customize page and add another menu into Header Menu location from Appearance -> Menus page.

Creating JS File

At first I created a JS file “combine-menu.js” and save into BB child theme’s js (lowercase) folder (you will create this folder, if you have not it). This JS file is containing the following JavaScript codes. Here is the full snippet:

(function(document, $, undefined){

	function __combineMenus(){
		if ( ( $( '.navbar-toggle' ).css('display') === "block" ) && $( '.fl-page-bar-nav' ).length > 0 ) { 
			$( '.fl-page-bar-nav > li' ).addClass( 'moved-item' ); 
			$( '.fl-page-bar-nav > li' ).appendTo( '.fl-page-nav-toggle-visible-mobile' );
			$( '.fl-page-bar-nav' ).hide();
		} else if ( ( $( '.navbar-toggle' ).css('display') === "none" ) && $( '.fl-page-bar-nav' ).length > 0 ) {
			$( '.fl-page-bar-nav' ).show();
			$( '.fl-page-nav-toggle-visible-mobile > li.moved-item' ).appendTo( '.fl-page-bar-nav' );
			$( '.fl-page-bar-nav > li' ).removeClass( 'moved-item' );

	$(document).ready(function () {

		// run test on resize of the window
		$( window ).resize( __combineMenus );


})( document, jQuery );

This script is appending the top nav menu items at below the Header menu items when you are viewing your site on small device.

Enqueue the JS file

Loading the combine-menu.js file on the site with wp_enqueue_scripts hook. Open the functions.php file of BB child theme and add this small PHP snippet at end of the file

add_action( 'wp_enqueue_scripts', 'probb_enqueue_script_combine_menu', 1005 );
function probb_enqueue_script_combine_menu()
	wp_enqueue_script( 'combine-menu', get_stylesheet_directory_uri() . '/js/combine-menu.js', array(), '1.6.1', true );

That’s it. Now view your site on mobile device or resize the browser window on desktop and you can see the effect.

Checkout the live preview on my site

Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials