Many WordPress themes and designs have a main menu that contains the bulk of navigation links and a secondary menu that contains some other variety of links. With a responsive website we need to figure out what to do with these two WordPress menus when on a mobile device since we don’t want to be showing two separate hamburger menu buttons.
One hacky solution involves making a third menu specifically for mobile that contains all of the links. You would then show or hide each of the three menus based on screen size (show the two original menus on desktop and show the one combined menu on mobile). This certainly works, but it is not ideal because it requires management of an extra menu when updating links, which is easy to overlook when updating the menu links, and requires loading all three menus at all times onto the page. A preferred solution would be to dynamically combine the two wordpress menus into one. I am going to show you how to do this easily with some javascript code that you would include on the footer of every page.
WordPress Menus Example
This is an example of the multiple wordpress menus desktop layout I am referring to. I’ve highlighted the primary and secondary wordpress menu sections. This specific screenshot is from the base Genesis theme.
Menu Combination Code
We will be using jQuery to accomplish this menu combination, so make sure that jQuery is being properly loaded. I generally like to put this script into a separate file and have it loaded into the footer.
jQuery(document).ready(function($) {
configureMenus(); $( window ).resize( function() {
configureMenus();
});
function configureMenus() {
if ( window.innerWidth <= 767 ) {
//combine menus
$( 'ul#menu-top-menu > li' ).addClass( 'moved-item' );
$( 'ul#menu-top-menu > li' ).appendTo( 'ul#menu-main-menu' );
//hide secondary menu
$( '.nav-secondary' ).hide();
}
if ( window.innerWidth > 767 ) {
//show secondary menu
$( '.nav-secondary' ).show();
//split menus
$( 'ul#menu-main-menu > li.moved-item' ).appendTo( 'ul#menu-top-menu' );
$( 'ul#menu-main-menu' ).remove( 'ul#menu-main-menu > li.moved-item' );
}
}
});
For this code to work on your menus you just need to make sure your menus have the needed ID’s and/or classes as selectors to grab and manipulate the desired elements. If you are using a Genesis based theme, then this may be a plug and play script. If not, then you’ll probably need to make the minor modifications of the ID’s and classes to match up.
In our example:
Primary Menu <ul> has an ID of menu-main-menu
Secondary Menu <ul> has an ID of menu-top-menu
The main <nav> containing the secondary menu has a class of nav-secondary
Your site elements can either use the same ID’s and classes as this code, or you can adjust the selectors in the above code to match your current site setup. Whichever way you choose, once those selectors all match up the code can be plugged in to work.
How It Works
When the page is loaded and/or when the browser is resized, the code will trigger. It then checks the inner-window size. If under 768 pixels, the secondary menu gets a ‘moved-item’ class added to it as a marker and that menu’s items are then appended to the primary menu. The secondary menu is then hidden. If over 767 pixels, then the secondary menu is shown and the menu items that had been marked with the ‘moved-item’ class are then appended to the secondary menu. These marked items are then removed from the primary menu.
There you have it. A simple javascript based solution to dynamically combine your multiple wordpress menus into one for mobile devices.
I asked DuckDuckGo “wordpress join two menus for mobile” and yours was the first result. And it’s friggin spot on, lol
Thanks a bunch for this snippet, it was a plug’n’play goodie 🙂
Glad it was helpful and thanks for the kind words! Plug ‘n play is the highest praise I could hope for when trying to make these code snippets.
Glad it was helpful to me. Thanks…