How to Create a Mobile Menu in WordPress
It is well-known by now that the number of mobile internet users has long surpassed the number of wide-screen ones, namely desktop. This is why most modern websites have various responsive design modes which cater to different screen sizes and resolutions by default. However, this is not always true when it comes to mobile menus. Even though they are the main source of navigation for smaller screen sizes, some themes might not even come with separate mobile menus or have one which requires additional setup.
As a result, some WordPress users opt to hide the mobile menu provided by their theme and create a new one using WordPress plugins. Others might create an additional mobile menu which accommodates any features that might be missing. Whatever the case, knowing how to create a responsive mobile menu in WordPress can be an asset to any webmaster, which is why we decided to create this article.
Apart from using theme options, there are two distinct methods of creating mobile menus in WordPress. You can do it using a WordPress plugin or you could use coding. In this article, we will carefully elaborate on both these methods, while you can pick whichever you prefer. Here is what we will be discussing:
Qode Themes: Top Picks
View Collection
One of the greatest advantages of WordPress as a content management system (CMS) lies in the abundance of plugins which extend the functionalities of a website well beyond the default. This is also true for the menus in WordPress, as there are a lot of plugins which offer various menu-related features, or ways to change the appearance of both the desktop and mobile menus.
Furthermore, using plugins often requires little to no coding knowledge, which is why they are the primary choice of many WordPress users when it comes to menu management. With that in mind, we have investigated WordPress.org’s plugin repository and found a suitable menu creation and management plugin for this article: the Max Mega Menu.
The Max Mega Menu plugin is a freemium plugin which allows you to configure multiple menu locations, restyle the menus with the options that also integrate with the WordPress default menu editor, and even change the behavior of existing menus coming from your theme. Generally speaking, this plugin allows you to control most aspects of editing a menu, both desktop and mobile, in its free version.
Some of the features include setting a flyout menu or mega menu, off-canvas or standard dropdown mobile menus, various styling options, and multiple transitions and menu-displaying events to choose from. Also, the menus are responsive, touch and retina-ready.
The menus are created with accessibility in mind, allow for addition of WordPress widgets and have additional settings for menu items integrated within the Appearance > Menus section for added user-friendliness. Apart from that, the plugin comes with in-depth documentation which thoroughly explains all the plugin options and configurations for newer WordPress users, while also providing coding examples for intermediate and advanced users so that they can extend its functionalities even further.
As for the premium features, they include tabbed mega menus, sticky, vertical, and accordion menus, additional icon sets, additional toggle bar blocks like logos and search boxes, WooCommerce support, Google fonts, and premium support, among other things.
All in all, the plugin offers a variety of options for both desktop and mobile, even in its free version, which is why we decided to cover it. However, as this is an article regarding mobile menus only, we will focus on the plugin options which relate specifically to mobile menus and demonstrate how you can display your menu on mobile only using this plugin.
After installing and activating the plugin, navigate to the Mega Menu > Menu Locations section. This will open the Menu Locations tab, in which you will be able to see all the registered menu locations, as well as create new ones. In this section, you can also edit the functionalities of existing menu locations within the limits the plugin provides. This means that with this plugin you can even alter the display and functionality of the menu locations provided by your theme. However, for the purposes of this article, we will only create a new menu location and edit it using the options provided.
To add a new menu location click the Add another menu location button.
Then, in the following section, you will need to enter the menu location name and, optionally, assign a menu to that location. If you are unsure which menu to assign to this location or haven’t created that menu yet, select the Skip – I’ll assign a menu later option. In that case, you will need to assign the menu from the Manage Locations tab within the Appearance > Menus section later on. Click the Add menu location button to finish this process.
For this article, we have created a new menu location called Max Mega Menu Location. However, to use this new menu location to full effect, we advise creating a new menu theme as well. Otherwise, your menu will, when displayed on the website, use the default styles and effects set by the plugin.
Therefore, we advise navigating to the Menu Themes tab, where you will be able to edit the properties of your themes. After plugin installation, you will only have a single theme called Default, which will be displayed when accessing this tab. To create a new menu theme, click the ellipsis (···) button and select the Add new theme option from the menu.
A new theme will be created shortly after with the same default options, which you can edit accordingly. For the purposes of this demonstration, we have created a new theme called Custom theme. It will be displayed in the dropdown menu next to the Select theme to edit label.
Having said that, let us go over some of the options we used. Since there are quite a few options in several editing tabs, we will not go over every single one, but rather highlight those we found more important. It is also worth noting that the menu locations displayed using this plugin show menus both on desktop and mobile.
Note that not all options which the plugin provides are made for mobile, some of them are for desktop only. In this article, we will go over some of the more important mobile-related options and show you a way to display your menu mobile-only, as opposed to all screen sizes, which is done by default.
With that in mind, after selecting a theme that you wish to edit, you will see several tabs, starting from the one called General Settings. In this tab, among other options, you can adjust the display of your mobile arrows, apply hover transitions and increase the z-index past the default value, to ensure that your mobile menu isn’t overlapped by the content of your pages. After you set the options you wish to change within this tab, make sure to click the Save Changes button at the bottom to save your settings.
The following three tabs – Menu Bar, Mega Menus and Flyout Menus – contain settings which concern the desktop aspect of your menu. We will skip them in this overview. Instead, we will proceed straight to the Mobile Menu tab, where you can set the design of your mobile menu and some of its functionalities.
Out of the options found in this tab, we have to emphasize the Responsive Breakpoint and the Toggle Bar Designer options as the most important ones. The former determines at which screen width the menu turns from its desktop version to mobile, while the latter enables you to adjust the position of the toggle icon, i.e. the position of the hamburger icon.
For the responsive breakpoint option, it is best set at the breakpoint used in your current theme, but you can also set an alternative breakpoint if you feel it is more appropriate. As for the toggle bar option, we will cover it below.
You can design the toggle bar by dragging and dropping the toggle into one of the three menu subsections.
Additionally, you can choose between a standard or animated menu toggle and a spacer, while some other features like search, logo, or an icon are reserved for the premium version of the plugin.
Finally, after clicking on the toggle bar icon you will access additional options which allow you to style it further.
Additionally, we will examine the Off Canvas Width option, which is further down the Mobile Menu options tab and allows you to set the width of the mobile menu, but only if the mobile effect is set to “Slide Left” or “Slide Right”. As this effect is set a bit later in the configuration process, we advise taking this setting into account afterward.
As for the remaining settings, you can remove the toggle bar, make submenus full width, as well as adjust general settings regarding the height, color, and font of the menu items, the menu background option, and others.
For this article, we haven’t changed those settings much from the default values. After adjusting the settings in this section accordingly, click the Save Changes button at the bottom again to save your settings. Then, proceed to the final section: Custom Styling.
Generally speaking, the Custom Styling section is well-suited for intermediate and advanced WordPress users, as it offers a way to change the display of the menu or even to add new features or restrict existing ones. This is done by either CSS or SCSS code. As a helpful tip from the plugin authors, you will also see a list of SCSS variables and mixins and even some coding examples of how a suitable SCSS code snippet with those two can be created. Additionally, having opened the Custom Styling tab, you will see a small SCSS code snippet, whose purpose is to place the whole navigation into a separate line, already inserted.
However, even though this section might seem frightening to most WordPress users, using it is the easiest way to display your menu on small screen sizes only. More precisely, since the menu locations created using this plugin are displayed both on desktop and mobile, the easiest way of making your new menu mobile-only is to hide its appearance on wider screen sizes with CSS or SCSS code. And that is exactly what we have done using a small SCSS code snippet.
We have included that small SCSS snippet which shows your new menu on mobile devices only using the plugin’s $wrap variable and desktop mixin. The snippet is below, starting with the comment explaining what it does.
/** Hide menu on desktop **/
@include desktop {
#{$wrap} {
display: none;
}
}
If you also want to make your menu appear only on small screen sizes, you can place this code snippet directly below the one that is inserted by the plugin. Then, click the Save Changes button to save the code.
To elaborate, this code snippet takes into account the Responsive Breakpoint setting mentioned previously and hides the menu on screen sizes larger than that breakpoint. For example, if your responsive breakpoint is set at 768px, then this snippet will hide the menu location on all screen sizes starting from 769px and above. With it, we conclude our overview of the Menu Themes section.
To elaborate, this code snippet takes into account the Responsive Breakpoint setting mentioned previously and hides the menu on screen sizes larger than that breakpoint. For example, if your responsive breakpoint is set at 768px, then this snippet will hide the menu location on all screen sizes starting from 769px and above. With it, we conclude our overview of the Menu Themes section.
Return to the Menu Locations section to finish the setup process of the new menu location. After you click on your new menu location once more, you will see three tabs: General Settings, Advanced, and Display Options.
In the first tab, make sure to tick the checkbox next to the Enabled option to enable the plugin options for this menu location, and make sure to select the mobile theme you previously created under the Theme option. Additionally, you should also select the event which triggers the appearance of submenus, as well as a mobile effect for your menu and the speed of that animation. Optionally, you can update the description of the menu location you previously made. Afterward, click the Save Changes button to apply the selected settings and proceed to the Advanced tab.
In this tab, you can specify the advanced behaviors of your menu. Most importantly, you should carefully review and set up the click event behavior, mobile sub menu behavior, and default state. Furthermore, if you wish to display menu item descriptions, make sure to enable it here. For the most part, we have stuck to the default setting values in this section here. After having selected the desired options, click the Save Changes button to save your choices and open the Display Options tab.
Having done that, we come to the last tab which holds the key for whether and how the newly created menu will be displayed on the website. The plugin offers three possible ways of displaying the menus: using a widget, shortcode, or inserting a suitable PHP code snippet. We will briefly cover all three below, starting from the ones that are easier to implement.
For most WordPress users, displaying the newly created menu is easiest using the Max Mega Menu widget. To do this, navigate to Appearance > Widgets and select the Max Mega Menu widget from the list of Available Widgets.
Then, you should add the widget to the widget area where you wish to display this menu. As for the widget options, you can only enter the widget title and choose the menu location you wish to display. After doing so, click the Save button and test the widget area behavior on your website.
Depending on your choice of widget area and the amount of space available for your new menu, the display could vary significantly. Therefore, it is not uncommon that the display of the mobile menu needs additional styling. This is done by adjusting the options of your custom menu theme, as well as by adding additional CSS code. However, since these adjustments require a case-by-case approach, we will not go any further into it.
A slightly more challenging method is the shortcode method. The Max Mega Menu plugin offers a single shortcode called maxmegamenu, which can be used to display the desired menu location anywhere on the website. The shortcode accepts only one argument – the identifier of a menu location. Therefore, any use of this shortcode requires strict syntax. You will have to use either
[maxmegamenu location=location_identifier_goes_here]
or
[maxmegamenu location="location_identifier_goes_here"]
with the location_identifier_goes_here part properly replaced with a menu location identifier. This ID can be seen after opening the new menu location in the Display Options tab. It is displayed both in the PHP Function and Shortcode method. As shown in the screenshot below, in our case, the identifier is max_mega_menu_1.
As for the syntax itself, the latter type is more suitable for shortcodes which accept multiple arguments but can be used in cases of single arguments, such as this one. With that being said, the previously mentioned code lines are called shortcode calls and should be entered into a suitable shortcode-rendering element for the shortcode to be displayed on the website. As this is something we have covered in length in our article on the use of shortcodes, we advise reading the mentioned article for more info.
Finally, we have come to the most challenging method – the PHP Function. Generally speaking, this method involves using the wp_nav_menu() function to display the menu location. And while the plugin offers an example of a code snippet which you can use and instructs you to insert it inside a template file (usually header.php), we would argue for a slightly more advanced approach which has become standard in recent years. Of course, this means coding a custom function which displays the mobile menu and “hook it” onto a suitable, theme-specific hook.
To illustrate this process, we have included the following PHP code snippet as an example.
function qode_display_custom_mobile_menu_location() {
if ( has_nav_menu( 'location_identifier_goes_here' ) ) {
wp_nav_menu( array(
'theme_location' => 'location_identifier_goes_here'
) );
}
}
add_action( 'theme-specific-hook-goes-here', 'qode_display_custom_mobile_menu_location' );
This snippet shows a possible way of displaying a menu in WordPress using hooks. However, this code shouldn’t be copied and pasted, as it simply wouldn’t work. Instead, two changes need to be made for it to work properly. We will explain them below.
The code shown below displays a custom function called qode_display_custom_menu_location() which displays a menu thanks to the use of the wp_nav_menu() function within. Furthermore, that code is wrapped with a conditional statement that uses the has_nav_menu() function, which ensures that the menu is shown only if it is assigned to a specific menu location which is denoted by its identifier. And since these menu location identifiers are specific to the theme that you are using, we have inserted a dummy identifier called location_identifier_goes_here.
Therefore, the first change involves replacing the location_identifier_goes_here part with a proper menu location identifier. This should be done in both instances in the code. As previously mentioned, this ID can be seen in the example snippet the plugin has included next to the PHP Function and Shortcode methods.
The other change which needs to be made concerns the last line of the code. In it, we have “hooked” our custom function called qode_display_custom_menu_location() onto a suitable action hook using the add_action() function. This line of code is what ensures that the menu will get displayed, and displayed in a proper place on your website. However, as the name of the action hook depends on the theme you are using, we have placed a dummy one called theme-specific-hook-goes-here.
Thus, the second change is to replace the theme-specific-hook-goes-here part with a proper theme-specific action hook. Needless to say, as the concept of hooks in WordPress is quite advanced, this change might require a considerable amount of time. Thankfully, since we have covered the topic of hooks in WordPress in the latter part of the article, we advise reviewing it. In it, we have given a brief overview of what hooks are and what you should do to find the most suitable one for this occasion.
That said, after you perform both the required changes, you will need to add the altered PHP code snippet, via FTP, in a suitable location, for it to work properly. These are either the functions.php file of your child theme or inside a site-specific plugin. However, we will not go over the process of adding a code snippet via FTP in this article.
Having implemented one of the three aforementioned methods, you will see the newly created menu displayed on your website in the desired location and working properly. And, in case you need further adjusting, we advise reviewing the options once more and revising some of the choices you made. Furthermore, we advise reading the documentation for an overview of the options, as well as anything we might have missed in this article.
This concludes our overview of the Max Mega Menu plugin for adding and editing menus in WordPress. After having created a new menu location, assigned a menu, chosen the desired options, and displayed it on the website using one of the three methods previously covered, the only thing that remains is to preview the outcome. Ours is shown in the gif below.
While you can use WordPress plugins to create and display new mobile menus, you could also use custom code. In such a way, you won’t be restricted by the options provided by your current theme or by the options of a WordPress menu plugin. Needless to say, this method is mostly reserved for advanced WordPress users, as it requires a considerable amount of coding and overall WordPress knowledge.
Nevertheless, we will cover it as well, with code snippets specially created for this article. Furthermore, we will mention that these code snippets are created similarly to how a mobile menu was coded for our Qi theme, which we also suggest you peruse.
That said, since the process of creating a mobile menu in WordPress is quite lengthy, we have purposefully broken this part of the article into several subsections, each denoting a separate phase in the menu creation process. As for the sections that contain PHP, JS, or CSS code, we have tried to explain thoroughly what the purpose of that code is and where and how it should be implemented.
Still, as a precautionary measure, we advise making a backup of your website before going any further and adding the code snippets that we have provided. Having done that, let us proceed to the first step within this method.
-
Registering a Custom Menu Navigation
The first step in creating a mobile menu in WordPress using custom code is to register the new mobile menu navigation. This can be done either using the register_nav_menus() function or the register_nav_menu() function. In this example, we have used the former. The use of that function needs to be placed into a separate function and hooked onto an appropriate hook.
While some advanced users can also use custom hooks, the hooks that are mentioned officially within the developer documentation on WordPress.org are the init and after_setup_theme action hooks. Again, we have used the former. The code displayed below represents a custom function called qode_custom_mobile_menu() which is hooked onto the init action hook. It registers mobile navigation called Custom Mobile Navigation, which has the custom-mobile-navigation label as the unique menu location identifier. This identifier will be used afterward to display the menu location.
function qode_custom_mobile_menu() {
register_nav_menus(
array(
'custom-mobile-navigation' => esc_html__( 'Custom Mobile Navigation', 'textdomain' )
)
);
}
add_action( 'init', 'qode_custom_mobile_menu' );
This code should be added, via FTP, either inside the functions.php file of your child theme or a site-specific plugin. However, we will not go over the details of adding the code, but will instead focus on explaining the code snippets. With that said, let us proceed.
-
Assigning a Menu to the New Menu Location
After adding the code, the new menu location will be available within the Appearance > Menus > Manage Locations tab. There, you should locate the new menu location and assign a menu to it. Then, click the Save Changes button to apply the changes. Of course, in case you haven’t created an appropriate menu for this location (or any at all), you should create it in the Edit Menus tab by clicking on the Create a new menu link. Then, assign the menu to the related location, as mentioned above.
-
Displaying the Menu Location On the Front End
The following step involves displaying the menu location and any additional HTML markup which might help with mobile functionality which will be explained later, using JS and CSS code. We have used the following code:
function qode_display_custom_mobile_menu() {
if ( has_nav_menu( 'custom-mobile-navigation' ) ) { ?>
<div id="qodef-page-custom-mobile-header">
<div id="qodef-page-custom-mobile-header-inner">
<button type="button" class="qodef-custom-mobile-header-opener" aria-expanded="false"
aria-label="<?php esc_attr_e( 'Open the menu', 'textdomain' ); ?>">
<svg class="qodef--initial" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="13" x="0px" y="0px"
viewBox="0 0 21.3 13.7" xml:space="preserve" aria-hidden="true"><rect x="10.1" y="-9.1"
transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 11.5 -9.75)"
width="1"
height="20"></rect>
<rect x="10.1" y="-3.1" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 17.5 -3.75)"
width="1"
height="20"></rect>
<rect x="10.1" y="2.9" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 23.5 2.25)" width="1"
height="20"></rect></svg>
</button>
<nav class="qodef-custom-mobile-header-navigation qodef-custom-mobile-header-navigation-initial"
role="navigation" aria-label="<?php esc_attr_e( 'Custom Mobile Menu', 'textdomain' ); ?>">
<?php wp_nav_menu( array(
'theme_location' => 'custom-mobile-navigation',
'container' => '',
'menu_class' => '',
'link_before' => '<span class="qodef-menu-item-text">',
'link_after' => '</span>'
) ); ?>
</nav>
</div>
</div>
<?php }
}
add_action( 'lekker_action_after_page_mobile_header_inner', 'qode_display_custom_mobile_menu' );
Let us elaborate on it in detail. To that effect, we will observe the code in a more simplified form.
It represents a custom function called qode_display_custom_mobile_menu(), which is hooked onto a corresponding action hook, currently called theme-specific-hook-goes-here. Needless to say, you should replace this placeholder name with the appropriate hook below.
As for the code within the function, it represents the HTML structure of our menu location. There are two separate parts – a hamburger button with SVG code and an <nav> HTML element which will hold the menu navigation. Both parts are given custom attributes, which will help with the JS and CSS code later. Additionally, they are wrapped with two <div> elements, one with the ID of qodef-page-custom-header-inner and the other with the ID of qodef-page-custom-header, which will also be used later.
As for the menu location itself, it is displayed by calling the wp_nav_menu() function. And, even though this function accepts many arguments, we have only specified the exact menu location using its corresponding identifier (custom-mobile-navigation) and the HTML structure that will go around the menu item name, using the link_before and link_after arguments.
Finally, the whole code is wrapped with a has_nav_menu() conditional, making sure that the whole code is only executed if the previously registered Custom Mobile Navigation menu location has a menu assigned to it.
function qode_display_custom_mobile_menu() {
if ( has_nav_menu( 'custom-mobile-navigation' ) ) { ?>
<div id="qodef-page-custom-mobile-header">
<div id="qodef-page-custom-mobile-header-inner">
<!-- hamburger button with SVG code goes here -->
<nav class="qodef-custom-mobile-header-navigation qodef-custom-mobile-header-navigation-initial"
role="navigation" aria-label="<?php esc_attr_e( 'Custom Mobile Menu', 'textdomain' ); ?>">
<?php wp_nav_menu( array(
'theme_location' => 'custom-mobile-navigation',
'container' => '',
'menu_class' => '',
'link_before' => '<span class="qodef-menu-item-text">',
'link_after' => '</span>'
) ); ?>
</nav>
</div>
</div>
<?php }
}
add_action( 'theme-specific-hook-goes-here', 'qode_display_custom_mobile_menu' );
With that being said, the only thing that remains to be resolved is how we have gotten to the hook name we used in the initial code. As it is a theme-specific hook that belongs to the Lekker theme we have used for this article, it needs to be replaced with an appropriate hook specific to the theme you are using. Meaning, the whole code of the qode_display_custom_mobile_menu() function can be used as-is, but the hook name in the use of the add_action() function needs to be replaced properly. Let us explain why this is the case and how to find such a hook.
Simply put, hooks are a placeholder piece of code which allows WordPress users to add new functionalities to their WordPress website or to modify current ones. The former is done using action hooks, while the latter is done using filter hooks. The way that hooks work is that any custom functions that are “hooked onto” them are executed as if they are placed directly within the template files on the exact place where the corresponding hook is located. That way, all custom modifications are easy to keep track of, while the corresponding template files are left unchanged.
This way of adding custom functionalities to a WordPress website has become standard in recent years, as opposed to directly editing the template files with your modifications, which was previously the norm. The reason why the latter is no longer recommended is that keeping track of your modifications across multiple files can be challenging. Furthermore, the same modifications need to be repeated after each update (theme, plugin, or WordPress), as the relevant template files will get overridden on each update.
Having said that, let us explain how to locate the corresponding hook that will replace the one we used.
If you are able, you should investigate the files of your theme to find the corresponding template file that is responsible for the display of the mobile header, or the header in general.
In some cases, it can even be multiple files or even a whole subfolder structure. Having found it, you should look for the instances of the do_action() function which will hold the name of action hooks you could use. In case you find multiple instances, you can test the code by replacing the hook we used with yours, one at a time, and observe the display and position of your new mobile menu in regards to the default one provided by your theme.
Conversely, if you aren’t able or don’t feel comfortable investigating through theme files, ask the authors of your theme for help in finding the most suitable action hook.
Additionaly, we leave you with the example from the Lekker theme which we used for this article. In it, the mobile header is wrapped with the <header> HTML element whose ID is qodef-page-mobile-header, while the mobile header content is placed within a <div> with the ID of qodef-page-mobile-header-inner (highlighted on the screenshot).
What is notable is that the same file contains two action hooks you could use to add a mobile menu. These are lekker_action_before_page_mobile_header_inner and lekker_action_after_page_mobile_header_inner, respectively, and are marked on the screenshot below.
Using the former would mean that our new mobile menu would be displayed above the theme’s default one while using the latter would mean it would be below it. As we wanted the latter case for our article, we chose the lekker_action_after_page_mobile_header_inner as the suitable action hook.
Having explained that, after you find your suitable action hook for the display of your registered menu location, replace the hook we used with it. Then, that code should be added either inside the functions.php file of your child theme or a site-specific plugin, similar as above.
-
Adding Features
At this point, you can code some additional features which should be included alongside menu items within your menus. For example, those could be descriptions below specific menu items or custom arrows which point to a menu item with a submenu.
In this article, we have included an example of the latter, using a PHP code snippet. Then, by clicking or tapping on those arrows, the submenus will be opened or closed thanks to additional code which will be added later. We have added the arrows by using the code shown below.
function qodef_add_right_icon_to_custom_mobile_nav_item( $args, $item, $depth ) {
$is_custom_mobile_menu = isset( $args->theme_location ) && $args->theme_location === 'custom-mobile-navigation';
$args->after = '';
if ( in_array( 'menu-item-has-children', $item->classes, true ) && $is_custom_mobile_menu ) {
$args->after = '<button type="button" class="qodef-mobile-menu-item-icon" aria-expanded="false" aria-label="' . esc_attr__( 'Open the menu', 'textdomain' ) . '"><span class="screen-reader-text">' . esc_html__( 'Show sub menu', 'textdomain' ) . '</span>' . '<svg ' . ' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="6.2px" height="10.8px" viewBox="0 0 6.2 10.8" xml:space="preserve" aria-hidden="true"><g><path d="M5.9,5.9l-4.7,4.7c-0.3,0.3-0.7,0.3-1,0c-0.1-0.1-0.2-0.3-0.2-0.5c0-0.2,0.1-0.4,0.2-0.5l4.1-4.2L0.3,1.2c-0.4-0.3-0.4-0.7,0-1c0.3-0.3,0.7-0.3,1,0l4.7,4.7C6.1,5,6.2,5.2,6.2,5.4C6.2,5.6,6.1,5.8,5.9,5.9z"/></g></svg>' . '</button>';
}
return $args;
}
add_filter( 'nav_menu_item_args', 'qodef_add_right_icon_to_custom_mobile_nav_item', 10, 3 );
The code represents a function called qodef_add_right_icon_to_custom_mobile_nav_item(), which is “hooked onto” the nav_menu_item_args filter hook. Since this is a default WordPress filter hook, there is no need to change it with some other filter hook as we have done with theme-specific action hooks in the previous section.
We have purposefully given the function a self-explanatory name, as the code adds a right arrow to corresponding menu items. These menu items are the ones that have the default class “menu-item-has-children” used for denoting menu items with submenus.
Additionally, these menu items need to be part of a registered menu location with the identifier custom-mobile-navigation. As for the right arrows, these are in fact buttons with an SVG and have a custom class called qodef-mobile-menu-item-icon which will be used later.
-
Adding Functionality to the Mobile Menu Using Code
After adding all the previous code, your new mobile menu location will be registered, have a menu assigned, and displayed on your website in the place specified with the action hook you choose. However, this menu still lacks the functionality and will display almost as plain HTML, with little styling coming from your theme or plugins.
To address that, we need to add additional code that handles the functionality of a mobile menu. Generally speaking, this is achieved either with JS or CSS code or a mixture of both. For this article, we have opted for a mix, emphasizing JS code. The JS code we created for the article is included below.
(function ($) {
'use strict';
$(document).ready(
function () {
qodefCustomMobileHeader.init();
}
);
var qodefCustomMobileHeader = {
init: function () {
var $holder = $('#qodef-page-custom-mobile-header-inner');
if ($holder.length) {
qodefCustomMobileHeader.initMobileHeaderOpener($holder);
qodefCustomMobileHeader.initDropDownMobileMenu();
}
},
initMobileHeaderOpener: function (holder) {
var $opener = holder.find('.qodef-custom-mobile-header-opener');
if ($opener.length) {
var $navigation = holder.find('.qodef-custom-mobile-header-navigation');
$opener.on(
'tap click',
function (e) {
e.preventDefault();
if ($navigation.is(':visible')) {
$navigation.slideUp(450);
$opener.removeClass('qodef--opened').attr('aria-expanded', 'false');
} else {
$navigation.slideDown(450);
$opener.addClass('qodef--opened').attr('aria-expanded', 'true');
}
}
);
document.addEventListener(
'keyup',
function (event) {
if (event.key === 'Escape') {
if ($navigation.is(':visible')) {
$navigation.slideUp(450);
$opener.removeClass('qodef--opened').attr('aria-expanded', 'false');
}
} else if (event.key === 'Tab') {
if (typeof event !== 'undefined' && $navigation.is(':visible') && !$navigation.is(event.target) && $navigation.has(event.target).length === 0) {
$navigation.slideUp(450);
$opener.removeClass('qodef--opened').attr('aria-expanded', 'false');
}
}
}
);
}
},
initDropDownMobileMenu: function () {
var $dropdownOpener = $('.qodef-custom-mobile-header-navigation .menu-item-has-children > .qodef-mobile-menu-item-icon');
if ($dropdownOpener.length) {
$dropdownOpener.each(
function () {
var $thisItem = $(this);
$thisItem.on(
'tap click',
function (e) {
e.preventDefault();
var $thisItemParent = $thisItem.parent(),
$thisItemParentSiblingsWithDrop = $thisItemParent.siblings('.menu-item-has-children');
if ($thisItemParent.hasClass('menu-item-has-children')) {
var $submenu = $thisItemParent.find('ul.sub-menu').first();
if ($submenu.is(':visible')) {
$submenu.slideUp(450);
$thisItemParent.removeClass('qodef--opened');
$thisItem.attr('aria-expanded', 'false');
} else {
$thisItemParent.addClass('qodef--opened');
$thisItem.attr('aria-expanded', 'true');
if ($thisItemParentSiblingsWithDrop.length === 0) {
$thisItemParent.find('.sub-menu').slideUp(
400,
function () {
$submenu.slideDown(400);
}
);
} else {
$thisItemParent.siblings().removeClass('qodef--opened').find('.sub-menu').slideUp(
400,
function () {
$submenu.slideDown(400);
}
);
}
}
}
}
);
}
);
}
}
};
})(jQuery);
As this code snippet is a bit lengthy, we will try to summarize it.
In short, the first part of the code instructs the behavior on activating the hamburger icon, while the second part deals with the behavior of the submenus. More precisely, by clicking or tapping the hamburger icon, the menu navigation will open by sliding down or close by sliding up, depending on if it was previously visible, i.e. open.
This is done by toggling the value of the aria-expanded attribute from false to true and vice versa. Also, if the menu navigation is visible, it will be closed by pressing the Esc key on the keyboard, which is the same as going through all the links from the mobile menu using the Tab key.
The submenus are opened or closed by clicking or tapping on the right arrows next to corresponding menu items. This is also set by toggling the value of the aria-expanded attribute.
Finally, we have toggled the addition/removal of a CSS class called qodef–opened, which serves to add a discreet animation to the right arrows which are placed next to items with submenus. When clicked on, the right arrows will rotate 90 degrees clockwise to illustrate the opening of the said submenu and will return to their initial position on the second click to illustrate the same submenu being closed.
This concludes our explanation of the JS code which is mostly responsible for the functionality of the mobile menu we created.
However, there is something else we must mention before addressing the CSS code. Since the code we mentioned above is a JS script, it should be added slightly differently than the PHP code snippets we previously mentioned. Users of QodeInteractive themes can insert this code inside the Custom JS field located in the Theme Options > General section.
For all other users, we suggest placing this JS script into a separate file, uploading it to the server, and then enqueue-ing using the wp_enqueue_script() function. For more on this process, we advise reading our article on enqueue-ing custom scripts and stylesheets. However, we will also show one possible implementation of this process below, as an example.
Example:
We have saved the code to a file called custom-mobile-menu.js and uploaded it within the directory of our child theme, via FTP. The code we used to enqueue it then is shown below.
function custom_mobile_menu_script() {
wp_enqueue_script( 'custom-mobile-menu-script', get_stylesheet_directory_uri() . '/custom-mobile-menu.js', array( 'jquery' ), false, true );
}
add_action('wp_enqueue_scripts','custom_mobile_menu_script');
It shows a function called custom_mobile_menu_script() that enqueues the script with a unique handle called custom-mobile-menu-script by using the wp_enqueue_script() function. The remaining parameters are the path to the file, the dependency from the jquery script, a parameter which specifies that there are no versions to this file, and a parameter which specifies that the script should be loaded in the footer.
The file path is specified with the get_stylesheet_directory_uri() function, i.e. it is wp-content/themes/child_theme_name/custom-mobile-menu.js.
Finally, for all to work properly, the whole function is hooked onto the wp_enqueue_scripts action hook, which is a standard hook for enqueuing scripts and stylesheets that are intended for front-end users.
Having said that, let us proceed to the final part of this comprehensive coding overview of how to create a mobile menu in WordPress: the CSS code responsible for the styling of our custom mobile menu and, partly, its functionality. The code we used is given below.It mostly uses the properties which we added as a part of the additional HTML markup as CSS selectors, as well as some default WordPress menu item CSS classes.
#qodef-page-custom-mobile-header {
display: none;
z-index: 100;
height: 70px;
background-color: #fff;
}
@media only screen and (max-width: 1024px) {
#qodef-page-custom-mobile-header {
display: block;
}
}
#qodef-page-custom-mobile-header-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 27px;
background-color: #fcd4d1;
}
.qodef-custom-mobile-header-opener {
position: relative;
width: auto;
padding: 0;
margin: 0;
line-height: 1;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
outline: none;
cursor: pointer;
-webkit-appearance: none;
margin-left: 20px;
}
.qodef-custom-mobile-header-opener svg {
display: block;
width: 21px;
height: auto;
margin: 3px;
}
.qodef-custom-mobile-header-opener svg .qodef--initial {
fill: none;
stroke: #1e1e1e;
}
.qodef-custom-mobile-header-opener :focus {
outline: 1px solid #1e1e1e;
}
.qodef-custom-mobile-header-navigation {
position: absolute;
top: 100%;
left: 0;
display: none;
width: 100%;
max-height: calc(100vh - 70px);
background-color: #fff;
border-bottom: 1px solid #1e1e1e;
padding: 0;
margin: 0;
overflow-y: scroll;
z-index: 10;
}
.qodef-custom-mobile-header-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.qodef-custom-mobile-header-navigation ul li {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin: 17px 0;
padding: 0;
}
.qodef-custom-mobile-header-navigation ul li a {
position: relative;
display: block;
font-size: 15px;
color: #1f1f1f;
}
.qodef-custom-mobile-header-navigation ul li .qodef-mobile-menu-item-icon {
position: relative;
padding: 0;
margin: 0;
line-height: 1;
color: #a8a7a7;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
outline: none;
cursor: pointer;
-webkit-appearance: none;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.qodef-custom-mobile-header-navigation ul li .qodef-mobile-menu-item-icon svg {
display: block;
width: 7px;
height: auto;
fill: #1e1e1e;
transform: rotate(0);
transition: transform 0.3s ease;
}
.qodef-custom-mobile-header-navigation ul li .qodef-mobile-menu-item-icon :hover, .qodef-custom-mobile-header-navigation ul li ul li > a :hover, .qodef-custom-mobile-header-navigation ul li ul li.current-menu-ancestor > a, .qodef-custom-mobile-header-navigation ul li ul li.current-menu-item > a, .qodef-custom-mobile-header-navigation > ul > li > .qodef-mobile-menu-item-icon {
color: #1e1e1e;
}
.qodef-custom-mobile-header-navigation ul li .qodef-mobile-menu-item-icon :focus {
outline: 1px solid #1e1e1e;
}
.qodef-custom-mobile-header-navigation ul li ul {
display: none;
width: calc(100% - 1em);
margin-left: 1em;
}
.qodef-custom-mobile-header-navigation ul li ul li {
margin: 8px 0;
}
.qodef-custom-mobile-header-navigation ul li.qodef--opened > .qodef-mobile-menu-item-icon svg {
transform: rotate(90deg);
}
.qodef-custom-mobile-header-navigation > ul {
margin: 0 auto;
padding: 22px 50px;
}
.qodef-custom-mobile-header-navigation > ul > li > a {
font-size: 17px;
line-height: 1.53em;
font-weight: 500;
}
.qodef-custom-mobile-header-navigation > ul > li > a :hover, .qodef-custom-mobile-header-navigation > ul > li.current-menu-ancestor > a, .qodef-custom-mobile-header-navigation > ul > li.current-menu-item > a {
text-decoration: underline;
}
.qodef-custom-mobile-header-navigation > ul > li > .qodef-mobile-menu-item-icon :hover {
color: #a8a7a7;
}
.qodef-custom-mobile-header-navigation > ul > li > ul > li :first-child {
padding-top: 9px;
}
As for the code itself, we will not go over it except to mention that, using a simple media query, we have made our custom navigation visible only for screens smaller or equal to 1024px, i.e. mobile and tablets. And, as mentioned above, using the transform property tied to the qodef–opened class, we have achieved the animation of a rotating right arrow.
The remaining code is responsible for the overall display and typography of the menu and its items. Generally speaking, you can alter some of that code (font size, background and text color, paddings) to fit the design of your current website if needed.
Having said that, the question of where to place this CSS code is equally important as it was with the JS code. For most WordPress users, this code can be placed either in the Appearance > Customize > Additional CSS section or using a CSS-inserting plugin.
The more advanced WordPress users can, however, place this kind of code inside a separate .css file, upload it to the server and enqueue it similarly as it was done with the JS code. For more on this process, we advise reading our article on enqueue-ing custom scripts and stylesheets.
After going over all the above-mentioned phases and creating the required code, the only thing that remains is to preview the final result of the newly-created WordPress mobile menu. Ours is shown in the gif below.
Final Thoughts
In this article, we have reviewed two different methods of creating mobile menus in WordPress – using a plugin or custom code. And while the implementation of these methods varies significantly in difficulty, the steps we used are the same. These are registering the menu location, assigning a menu to that location, adjusting the style and basic functionality of the menu, adding new features, and displaying the mobile menu, which we have carefully elaborated.
In the process, we have touched upon some of the more advanced WordPress concepts such as action and filter hooks and SCSS code, which you can further investigate. We are certain most WordPress users will be able to create a mobile menu using our plugin instructions, while the more advanced WordPress users will appreciate the coding ideas we have provided and will be able to further expand on them to create a suitable mobile menu for their website.
