Almost every site I build has a custom mobile menu. These days most clients prefer to have a “hamburger icon” that, when clicked, slide toggles the primary menu which is hidden by default. It’s a fairly straight forward approach but also looks elegant.
The thing is, often times sites have a secondary menu setup that is acting as what I can the “utility navigation”, meaning there are a select few menu items tucked away in a much less prominent menu. Most commonly this menu contains links such as About Us, Contact Us, We’re Hiring, etc. Items that are important, but that shouldn’t take up the prime real estate which is the primary menu.
Fast forward to mobile devices. Typically for mobile devices you hide the secondary menu since you don’t want to have two mobile menu. However if the secondary menu contains items you wish to show on mobile devices this becomes a problem.
The code below helps with that. On mobile devices, it takes the secondary menu items and appends them to the primary menu. This way we only have to show one menu for mobile devices but users can still see the items that were in the secondary menu.
| jQuery(document).ready(function($){ | |
| function mobile_combine_nav() { | |
| $('.nav-header li.secondary-item').remove(); | |
| if ( $('.nav-secondary').css( 'display' ) == 'none' ) { | |
| $('.nav-secondary li').addClass('secondary-item').clone().appendTo('.nav-header ul'); | |
| } | |
| } | |
| mobile_combine_nav(); | |
| $(window).resize(mobile_combine_nav); | |
| }); |