Combine two mobile menus into one in GeneratePress Theme

Do you want to combine the secondary mobile menu into primary mobile menu in GeneratePress theme? In this article I’ll share the procedure.

By default you will get two hamburger menu buttons in GeneratePress theme if you are activating the secondary menu. You will get something like this on your site (see the attached screenshot)

Two Menu Buttons

I am wanting to remove the top menu button and append the all menu items of top one into bottom menu. I create a new JS file “combine-menu.js” and save into “js” folder. This JS file is containing the following scripts:

(function(document, $, undefined){

	function __combineMenus(){
		if ( ( $( '.menu-toggle' ).css('display') === "block" ) && $( '.secondary-menu' ).length > 0 ) { 
			$( '.secondary-menu > li' ).addClass( 'moved-item' ); 
			$( '.secondary-menu > li' ).appendTo( '#site-navigation' );
			$( '.secondary-navigation' ).hide();
		} else if ( ( $( '.menu-toggle' ).css('display') === "none" ) && $( '.secondary-menu' ).length > 0 ) {
			$( '.secondary-navigation' ).show();
			$( '#site-navigation > li.moved-item' ).appendTo( '.secondary-menu' );
			$( '.secondary-menu > li' ).removeClass( 'moved-item' );

	$(document).ready(function () {

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


})( document, jQuery );

Enqueue the above JS file with wp_enqueue_scripts hooks. Open the functions.php file of your GP child theme and add this PHP snippets

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

Now refresh the site and you will get one toggle menu button. Click on it and you will get secondary menu items at end of the primary menu items.

Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials