{"id":31643,"date":"2021-11-10T15:00:47","date_gmt":"2021-11-10T14:00:47","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=31643"},"modified":"2022-01-13T11:34:46","modified_gmt":"2022-01-13T10:34:46","slug":"create-mobile-menu-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/create-mobile-menu-wordpress\/","title":{"rendered":"How to Create a Mobile Menu in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]It is well-known by now that <strong>the number of mobile internet users has long surpassed the number of wide-screen ones<\/strong>, 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, <strong>some themes might not even come with separate mobile menus<\/strong> or have one which requires additional setup.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As a result, some WordPress users opt to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-hide-wordpress-mobile-menu\/\">hide the mobile menu<\/a> 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, <strong>knowing how to create a responsive mobile menu in WordPress can be an asset<\/strong> to any webmaster, which is why we decided to create this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Apart from using theme options, there are two distinct methods of creating mobile menus in WordPress. You can do it <strong>using a WordPress plugin<\/strong> or you could <strong>use coding<\/strong>. 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:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#choosing-mobile-menu-plugin\">Choosing a Mobile Menu Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-mobile-menu-using-max-mega-menu-plugin\">How to Create a Mobile Menu in WordPress Using the Max Mega Menu Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-mobile-menu-using-custom-code\">How to Create a Mobile Menu in WordPress Using Custom Code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"choosing-mobile-menu-plugin\"><\/a>Choosing a Mobile Menu Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]One of the greatest advantages of WordPress as a content management system (CMS) lies in the abundance of <strong>plugins which extend the functionalities of a website<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, using plugins often <strong>requires little to no coding knowledge<\/strong>, 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\u2019s plugin repository and found a suitable menu creation and management plugin for this article: the Max Mega Menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/megamenu\/\" target=\"_blank\" rel=\"noopener\">Max Mega Menu<\/a> 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 <strong>control most aspects of editing a menu<\/strong>, both desktop and mobile, in its free version.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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,<strong> the menus are responsive, touch and retina-ready<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The menus are <strong>created with accessibility in mind<\/strong>, allow for addition of WordPress widgets and have additional settings for menu items integrated within the <strong>Appearance &gt; Menus<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]All in all, the plugin offers<strong> a variety of options for both desktop and mobile<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-mobile-menu-using-max-mega-menu-plugin\"><\/a>How to Create a Mobile Menu in WordPress Using the Max Mega Menu Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing and activating the plugin<\/a>, navigate to the <strong>Mega Menu &gt; Menu Locations<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"473\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mega-Menu-Locations.jpg\" class=\"attachment-full size-full\" alt=\"Mega Menu Locations\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mega-Menu-Locations.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mega-Menu-Locations-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mega-Menu-Locations-768x375.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mega-Menu-Locations-620x303.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add a new menu location click the<strong> Add another menu location<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Locations.jpg\" class=\"attachment-full size-full\" alt=\"Menu Locations\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Locations.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Locations-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Locations-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Locations-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, in the following section, you will need to<strong> enter the menu location name<\/strong> and, optionally, <strong>assign a menu to that location<\/strong>. If you are unsure which menu to assign to this location or haven\u2019t created that menu yet, select the <strong>Skip \u2013 I\u2019ll assign a menu later<\/strong> option. In that case, you will need to assign the menu from the Manage Locations tab within the Appearance &gt; Menus section later on. Click the <strong>Add menu location button<\/strong> to finish this process.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"609\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-Menu-Location.jpg\" class=\"attachment-full size-full\" alt=\"Add Menu Location\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-Menu-Location.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-Menu-Location-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-Menu-Location-768x483.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-Menu-Location-620x390.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, we advise <strong>navigating to the Menu Themes tab<\/strong>, 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<strong> (\u00b7\u00b7\u00b7)<\/strong> button and select the <strong>Add new theme option<\/strong> from the menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-New-Theme.jpg\" class=\"attachment-full size-full\" alt=\"Add New Theme\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-New-Theme.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-New-Theme-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-New-Theme-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-New-Theme-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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<strong> Select theme to edit<\/strong> label.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Select-Theme-to-Edit.jpg\" class=\"attachment-full size-full\" alt=\"Select Theme to Edit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Select-Theme-to-Edit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Select-Theme-to-Edit-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Select-Theme-to-Edit-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Select-Theme-to-Edit-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Note that <strong>not all options which the plugin provides are made for mobile<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that in mind, after <strong>selecting a theme<\/strong> that you wish to edit,<strong> you will see<\/strong> several tabs, starting from the one called <strong>General Settings<\/strong>. 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\u2019t overlapped by the content of your pages. After you set the options you wish to change within this tab, make sure to click the<strong> Save Changes<\/strong> button at the bottom to save your settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes.jpg\" class=\"attachment-full size-full\" alt=\"Save Changes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The following three tabs \u2013 Menu Bar, Mega Menus and Flyout Menus \u2013 contain settings which concern the desktop aspect of your menu. We will skip them in this overview. Instead, we will <strong>proceed straight to the Mobile Menu tab<\/strong>, where you can set the design of your mobile menu and some of its functionalities.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Out of the options found in this tab, we have to emphasize the <strong>Responsive Breakpoint<\/strong> and the <strong>Toggle Bar Designer<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the <strong>responsive breakpoint<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"620\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Menu Themes Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Settings-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Settings-768x491.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Settings-620x397.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can <strong>design the toggle bar by dragging and dropping the toggle<\/strong> into one of the three menu subsections.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"485\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggles.jpg\" class=\"attachment-full size-full\" alt=\"Mobile Menu Toggles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggles.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggles-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggles-768x384.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggles-620x310.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Additionally, <strong>you can choose between a standard or animated menu toggle and a spacer<\/strong>, while some other features like search, logo, or an icon are reserved for the premium version of the plugin.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggle-Bar-Designer.jpg\" class=\"attachment-full size-full\" alt=\"Mobile Menu Toggle Bar Designer\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggle-Bar-Designer.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggle-Bar-Designer-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggle-Bar-Designer-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Mobile-Menu-Toggle-Bar-Designer-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, after clicking on the toggle bar icon you will access additional options which allow you to style it further.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"585\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Open-Toggle-Options.jpg\" class=\"attachment-full size-full\" alt=\"Open Toggle Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Open-Toggle-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Open-Toggle-Options-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Open-Toggle-Options-768x464.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Open-Toggle-Options-620x374.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Additionally, we will examine the<strong> Off Canvas Width<\/strong> 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 \u201cSlide Left\u201d or \u201cSlide Right\u201d. As this effect is set a bit later in the configuration process, we advise taking this setting into account afterward.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For this article, we haven\u2019t changed those settings much from the default values. After adjusting the settings in this section accordingly, click the <strong>Save Changes<\/strong> button at the bottom again to save your settings. Then, proceed to the final section: <strong>Custom Styling<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Off-Canvas-Width.jpg\" class=\"attachment-full size-full\" alt=\"Off Canvas Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Off-Canvas-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Off-Canvas-Width-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Off-Canvas-Width-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Off-Canvas-Width-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Generally speaking, the Custom Styling section is well-suited for intermediate and advanced WordPress users, as it offers a way to<strong> change the display of the menu<\/strong> or even to <strong>add new features or restrict existing ones<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Custom-Styling.jpg\" class=\"attachment-full size-full\" alt=\"Menu Themes Custom Styling\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Custom-Styling.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Custom-Styling-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Custom-Styling-768x396.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Menu-Themes-Custom-Styling-620x320.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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, <strong>the easiest way of making your new menu mobile-only is to hide its appearance on wider screen sizes<\/strong> with CSS or SCSS code. And that is exactly what we have done using a small SCSS code snippet.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We have included that small SCSS snippet which shows your new menu on mobile devices only using the plugin\u2019s $wrap variable and desktop mixin. The snippet is below, starting with the comment explaining what it does.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/** Hide menu on desktop **\/\r\n@include desktop {\r\n#{$wrap} {\r\ndisplay: none;\r\n}\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you also want to make your menu appear only on small screen sizes, you can <strong>place this code snippet directly below the one that is inserted by the plugin.<\/strong> Then, click the <strong>Save Changes<\/strong> button to save the code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Styling.jpg\" class=\"attachment-full size-full\" alt=\"Custom Styling\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Styling.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Styling-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Styling-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Styling-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes-Button.jpg\" class=\"attachment-full size-full\" alt=\"Save Changes Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Save-Changes-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To elaborate, this code snippet<strong> takes into account the Responsive Breakpoint setting<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To elaborate, this code snippet <strong>takes into account the Responsive Breakpoint setting<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the first tab, make sure to <strong>tick the checkbox next to the Enabled option<\/strong> 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 <strong>update the description of the menu location<\/strong> you previously made. Afterward, click the <strong>Save Changes<\/strong> button to apply the selected settings and proceed to the Advanced tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location.jpg\" class=\"attachment-full size-full\" alt=\"Max Mega Menu Location\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In this tab, you can <strong>specify the advanced behaviors of your menu<\/strong>. Most importantly, <strong>you should carefully review and set up the click event behavior, mobile sub menu behavior, and default state<\/strong>. Furthermore, if you wish to <strong>display menu item descriptions<\/strong>, 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 <strong>Save Changes<\/strong> button to save your choices and open the <strong>Display Options<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"635\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Advanced.jpg\" class=\"attachment-full size-full\" alt=\"Max Mega Menu Location Advanced\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Advanced.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Advanced-300x197.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Advanced-768x503.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Advanced-620x406.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <strong>three possible ways of displaying the menus:<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options.jpg\" class=\"attachment-full size-full\" alt=\"Max Mega Menu Location Display Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options-620x325.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For most WordPress users, displaying the newly created menu is easiest using the Max Mega Menu widget. To do this, <strong>navigate to Appearance &gt; Widgets<\/strong> and <strong>select the Max Mega Menu widget<\/strong> from the list of Available Widgets.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"493\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Max Mega Menu Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget-768x391.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget-620x315.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, you should <strong>add the widget to the widget area where you wish to display this menu<\/strong>. As for the widget options, you can only <strong>enter the widget title and choose the menu location<\/strong> you wish to display. After doing so, click the <strong>Save<\/strong> button and <strong>test the widget area behavior<\/strong> on your website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget-Options.jpg\" class=\"attachment-full size-full\" alt=\"Max Mega Menu Widget Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Widget-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A slightly more challenging method is the shortcode method. The Max Mega Menu plugin offers<strong> a single shortcode called maxmegamenu<\/strong>, which can be used to display the desired menu location anywhere on the website.<strong> The shortcode accepts only one argument \u2013 the identifier of a menu location.<\/strong> Therefore, any use of this shortcode requires strict syntax. You will have to use either[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[maxmegamenu location=location_identifier_goes_here]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]or [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[maxmegamenu location=\"location_identifier_goes_here\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]with the <strong>location_identifier_goes_here<\/strong> 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 <strong>max_mega_menu_1.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options-Codes.jpg\" class=\"attachment-full size-full\" alt=\"Max Mega Menu Location Display Options Codes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options-Codes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options-Codes-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options-Codes-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Max-Mega-Menu-Location-Display-Options-Codes-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <strong>shortcode calls<\/strong> and should be<strong> entered into a suitable shortcode-rendering element<\/strong> for the shortcode to be displayed on the website. As this is something we have covered in length in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/#using-custom-shortcodes\">the use of shortcodes<\/a>, we advise reading the mentioned article for more info.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, we have come to the most challenging method \u2013 the PHP Function. Generally speaking, this method involves using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/\" target=\"_blank\" rel=\"noopener\">wp_nav_menu()<\/a> 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 \u201chook it\u201d onto a suitable, theme-specific hook.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To illustrate this process, we have included the following PHP code snippet as an example.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_display_custom_mobile_menu_location() {\r\nif ( has_nav_menu( 'location_identifier_goes_here' ) ) {\r\nwp_nav_menu( array(\r\n'theme_location' =&gt; 'location_identifier_goes_here'\r\n) );\r\n}\r\n}\r\nadd_action( 'theme-specific-hook-goes-here', 'qode_display_custom_mobile_menu_location' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This snippet shows <strong>a possible way of displaying a menu in WordPress using hooks<\/strong>. However, this code shouldn\u2019t be copied and pasted, as it simply wouldn\u2019t work. Instead, two changes need to be made for it to work properly. We will explain them below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The code shown below displays a custom function called <strong>qode_display_custom_menu_location()<\/strong> which displays a menu thanks to the use of the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/\" target=\"_blank\" rel=\"noopener\">wp_nav_menu()<\/a> function within. Furthermore, that code is wrapped with a conditional statement that uses the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/has_nav_menu\/\" target=\"_blank\" rel=\"noopener\">has_nav_menu()<\/a> 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<strong> location_identifier_goes_here.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, <strong>the first change involves replacing the location_identifier_goes_here part with a proper menu location identifier.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The other change which needs to be made concerns the last line of the code. In it, we have \u201chooked\u201d our custom function called <strong>qode_display_custom_menu_location()<\/strong> onto a suitable action hook using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener\">add_action()<\/a> 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 <strong>theme-specific-hook-goes-here<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Thus, the second change is to replace the<strong> theme-specific-hook-goes-here<\/strong> 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 <a href=\"#understanding-hooks\">hooks in WordPress<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That said, after you perform both the required changes, <strong>you will need to add the altered PHP code snippet<\/strong>, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">via FTP<\/a>, in a suitable location, for it to work properly. These are either the <em>functions.php<\/em> file of your child theme or inside a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>. However, we will not go over the process of adding a code snippet via FTP in this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Plugin-gif.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-mobile-menu-using-custom-code\"><\/a>How to Create a Mobile Menu in WordPress Using Custom Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2019t 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\" target=\"_blank\" rel=\"noopener\">Qi theme<\/a>, which we also suggest you peruse.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Still, as a precautionary measure, we advise <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">making a backup of your website<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Registering a Custom Menu Navigation<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first step in creating a mobile menu in WordPress using custom code is to <strong>register the new mobile menu navigation<\/strong>. This can be done either using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_nav_menus\/\" target=\"_blank\" rel=\"noopener\">register_nav_menus()<\/a> function or the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_nav_menu\/\" target=\"_blank\" rel=\"noopener\">register_nav_menu()<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While some advanced users can also use custom hooks, the hooks that are mentioned officially within the <a href=\"https:\/\/developer.wordpress.org\/\" target=\"_blank\" rel=\"noopener\">developer documentation on WordPress.org<\/a> are the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/init\/\" target=\"_blank\" rel=\"noopener\">init<\/a> and <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/after_setup_theme\/\" target=\"_blank\" rel=\"noopener\">after_setup_theme<\/a> action hooks. Again, we have used the former. The code displayed below represents a custom function called <strong>qode_custom_mobile_menu()<\/strong> which is hooked onto the <strong>init<\/strong> action hook. It registers mobile navigation called <strong>Custom Mobile Navigation<\/strong>, which has the <strong>custom-mobile-navigation<\/strong> label as the unique menu location identifier. This identifier will be used afterward to display the menu location.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">function qode_custom_mobile_menu() {\r\nregister_nav_menus(\r\narray(\r\n'custom-mobile-navigation' =&gt; esc_html__( 'Custom Mobile Navigation', 'textdomain' )\r\n)\r\n);\r\n}\r\nadd_action( 'init', 'qode_custom_mobile_menu' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code should be added, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">via FTP<\/a>, either inside the <em>functions.php<\/em> file of your child theme or a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>. 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.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Assigning a Menu to the New Menu Location<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After adding the code, the new menu location will be available within the<strong> Appearance &gt; Menus &gt; Manage Locations<\/strong> tab. There, you should <strong>locate the new menu location<\/strong> and<strong> assign a menu to it<\/strong>. Then, click the <strong>Save Changes<\/strong> button to apply the changes. Of course, in case you haven\u2019t created an appropriate menu for this location (or any at all), you should create it in the Edit Menus tab by clicking on the<em> Create a new menu<\/em> link. Then, assign the menu to the related location, as mentioned above.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Manage-Locations.jpg\" class=\"attachment-full size-full\" alt=\"Manage Locations\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Manage-Locations.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Manage-Locations-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Manage-Locations-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Manage-Locations-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Displaying the Menu Location On the Front End<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The following step involves <strong>displaying the menu location and any additional HTML markup<\/strong> which might help with mobile functionality which will be explained later, using JS and CSS code. We have used the following code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_display_custom_mobile_menu() {\r\nif ( has_nav_menu( 'custom-mobile-navigation' ) ) { ?&gt;\r\n&lt;div id=\"qodef-page-custom-mobile-header\"&gt;\r\n&lt;div id=\"qodef-page-custom-mobile-header-inner\"&gt;\r\n&lt;button type=\"button\" class=\"qodef-custom-mobile-header-opener\" aria-expanded=\"false\"\r\naria-label=\"&lt;?php esc_attr_e( 'Open the menu', 'textdomain' ); ?&gt;\"&gt;\r\n&lt;svg class=\"qodef--initial\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\nxmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" width=\"20\" height=\"13\" x=\"0px\" y=\"0px\"\r\nviewBox=\"0 0 21.3 13.7\" xml:space=\"preserve\" aria-hidden=\"true\"&gt;&lt;rect x=\"10.1\" y=\"-9.1\"\r\ntransform=\"matrix(-1.836970e-16 1 -1 -1.836970e-16 11.5 -9.75)\"\r\nwidth=\"1\"\r\nheight=\"20\"&gt;&lt;\/rect&gt;\r\n&lt;rect x=\"10.1\" y=\"-3.1\" transform=\"matrix(-1.836970e-16 1 -1 -1.836970e-16 17.5 -3.75)\"\r\nwidth=\"1\"\r\nheight=\"20\"&gt;&lt;\/rect&gt;\r\n&lt;rect x=\"10.1\" y=\"2.9\" transform=\"matrix(-1.836970e-16 1 -1 -1.836970e-16 23.5 2.25)\" width=\"1\"\r\nheight=\"20\"&gt;&lt;\/rect&gt;&lt;\/svg&gt;\r\n&lt;\/button&gt;\r\n&lt;nav class=\"qodef-custom-mobile-header-navigation qodef-custom-mobile-header-navigation-initial\"\r\nrole=\"navigation\" aria-label=\"&lt;?php esc_attr_e( 'Custom Mobile Menu', 'textdomain' ); ?&gt;\"&gt;\r\n&lt;?php wp_nav_menu( array(\r\n'theme_location' =&gt; 'custom-mobile-navigation',\r\n'container' =&gt; '',\r\n'menu_class' =&gt; '',\r\n'link_before' =&gt; '&lt;span class=\"qodef-menu-item-text\"&gt;',\r\n'link_after' =&gt; '&lt;\/span&gt;'\r\n) ); ?&gt;\r\n&lt;\/nav&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;?php }\r\n}\r\nadd_action( 'lekker_action_after_page_mobile_header_inner', 'qode_display_custom_mobile_menu' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let us elaborate on it in detail. To that effect, we will observe the code in a more simplified form.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It represents a custom function called <strong>qode_display_custom_mobile_menu()<\/strong>, which is hooked onto a corresponding action hook, currently called<strong> theme-specific-hook-goes-here<\/strong>. Needless to say, you should replace this placeholder name with the appropriate hook below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the code within the function, it represents the HTML structure of our menu location. <strong>There are two separate parts \u2013 a hamburger button with SVG code and an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/nav\" target=\"_blank\" rel=\"noopener\">&lt;nav&gt;<\/a> HTML element which will hold the menu navigation.<\/strong> Both parts are given custom attributes, which will help with the JS and CSS code later. Additionally, they are wrapped with two <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/div\" target=\"_blank\" rel=\"noopener\">&lt;div&gt;<\/a> elements, one with the ID of <strong>qodef-page-custom-header-inner<\/strong> and the other with the ID of <strong>qodef-page-custom-header<\/strong>, which will also be used later.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the menu location itself, it is displayed by calling the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/\" target=\"_blank\" rel=\"noopener\">wp_nav_menu()<\/a> function. And, even though this function accepts many arguments, we have only specified the exact menu location using its corresponding identifier (<strong>custom-mobile-navigation<\/strong>) and the HTML structure that will go around the menu item name, using the <strong>link_before<\/strong> and <strong>link_after<\/strong> arguments.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the whole code is wrapped with a <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/has_nav_menu\/\" target=\"_blank\" rel=\"noopener\">has_nav_menu()<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_display_custom_mobile_menu() {\r\nif ( has_nav_menu( 'custom-mobile-navigation' ) ) { ?&gt;\r\n&lt;div id=\"qodef-page-custom-mobile-header\"&gt;\r\n&lt;div id=\"qodef-page-custom-mobile-header-inner\"&gt;\r\n&lt;!-- hamburger button with SVG code goes here --&gt;\r\n&lt;nav class=\"qodef-custom-mobile-header-navigation qodef-custom-mobile-header-navigation-initial\"\r\nrole=\"navigation\" aria-label=\"&lt;?php esc_attr_e( 'Custom Mobile Menu', 'textdomain' ); ?&gt;\"&gt;\r\n&lt;?php wp_nav_menu( array(\r\n'theme_location' =&gt; 'custom-mobile-navigation',\r\n'container' =&gt; '',\r\n'menu_class' =&gt; '',\r\n'link_before' =&gt; '&lt;span class=\"qodef-menu-item-text\"&gt;',\r\n'link_after' =&gt; '&lt;\/span&gt;'\r\n) ); ?&gt;\r\n&lt;\/nav&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;?php }\r\n}\r\nadd_action( 'theme-specific-hook-goes-here', 'qode_display_custom_mobile_menu' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/lekker.qodeinteractive.com\/\" target=\"_blank\" rel=\"noopener\">Lekker theme<\/a> we have used for this article, <strong>it needs to be replaced with an appropriate hook specific to the theme you are using<\/strong>. Meaning, the whole code of the <strong>qode_display_custom_mobile_menu()<\/strong> function can be used as-is, but the hook name in the use of the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener\">add_action()<\/a> function needs to be replaced properly. Let us explain why this is the case and how to find such a hook.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"understanding-hooks\"><\/a>Understanding hooks in WordPress<\/h3>\n<p>[\/vc_column_text][vc_column_text]Simply put, <strong>hooks are a placeholder piece of code which allows WordPress users to add new functionalities to their WordPress website or to modify current ones<\/strong>. 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 \u201chooked onto\u201d 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 <strong>custom modifications are easy to keep track of<\/strong>, while the corresponding template files are left unchanged.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having said that, let us explain how to locate the corresponding hook that will replace the one we used.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are able,<strong> 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.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In some cases, it can even be multiple files or even a whole subfolder structure. Having found it, <strong>you should look for the instances of the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/do_action\/\" target=\"_blank\" rel=\"noopener\">do_action()<\/a> function which will hold the name of action hooks you could use<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Conversely, if you aren\u2019t able or don\u2019t feel comfortable investigating through theme files, <strong>ask the authors of your theme for help<\/strong> in finding the most suitable action hook.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/header\" target=\"_blank\" rel=\"noopener\">&lt;header&gt;<\/a> HTML element whose ID is <strong>qodef-page-mobile-header<\/strong>, while the mobile header content is placed within a &lt;div&gt; with the ID of <strong>qodef-page-mobile-header-inner<\/strong> (highlighted on the screenshot).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]What is notable is that the same file contains two action hooks you could use to add a mobile menu. These are <strong>lekker_action_before_page_mobile_header_inner<\/strong> and <strong>lekker_action_after_page_mobile_header_inner<\/strong>, respectively, and are marked on the screenshot below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Using the former would mean that our new mobile menu would be displayed above the theme\u2019s 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 <strong>lekker_action_after_page_mobile_header_inner<\/strong> as the suitable action hook.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-1.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-1-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having explained that, <strong>after you find your suitable action hook for the display of your registered menu location, replace the hook we used with it<\/strong>. Then, that code should be added either inside the <em>functions.php<\/em> file of your child theme or a site-specific plugin, similar as above.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Adding Features<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]At this point, you can <strong>code some additional features<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qodef_add_right_icon_to_custom_mobile_nav_item( $args, $item, $depth ) {\r\n$is_custom_mobile_menu = isset( $args-&gt;theme_location ) &amp;&amp; $args-&gt;theme_location === 'custom-mobile-navigation';\r\n$args-&gt;after = '';\r\nif ( in_array( 'menu-item-has-children', $item-&gt;classes, true ) &amp;&amp; $is_custom_mobile_menu ) {\r\n$args-&gt;after = '&lt;button type=\"button\" class=\"qodef-mobile-menu-item-icon\" aria-expanded=\"false\" aria-label=\"' . esc_attr__( 'Open the menu', 'textdomain' ) . '\"&gt;&lt;span class=\"screen-reader-text\"&gt;' . esc_html__( 'Show sub menu', 'textdomain' ) . '&lt;\/span&gt;' . '&lt;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\"&gt;&lt;g&gt;&lt;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\"\/&gt;&lt;\/g&gt;&lt;\/svg&gt;' . '&lt;\/button&gt;';\r\n}\r\nreturn $args;\r\n}\r\nadd_filter( 'nav_menu_item_args', 'qodef_add_right_icon_to_custom_mobile_nav_item', 10, 3 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The code represents a function called <strong>qodef_add_right_icon_to_custom_mobile_nav_item()<\/strong>, which is \u201chooked onto\u201d the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/nav_menu_item_args\/\" target=\"_blank\" rel=\"noopener\">nav_menu_item_args<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 \u201cmenu-item-has-children\u201d used for denoting menu items with submenus.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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<strong> qodef-mobile-menu-item-icon<\/strong> which will be used later.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Adding Functionality to the Mobile Menu Using Code<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"504\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Mobile-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code Mobile Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Mobile-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Mobile-Menu-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Mobile-Menu-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Mobile-Menu-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">(function ($) {\r\n'use strict';\r\n$(document).ready(\r\nfunction () {\r\nqodefCustomMobileHeader.init();\r\n}\r\n);\r\nvar qodefCustomMobileHeader = {\r\ninit: function () {\r\nvar $holder = $('#qodef-page-custom-mobile-header-inner');\r\n\r\nif ($holder.length) {\r\nqodefCustomMobileHeader.initMobileHeaderOpener($holder);\r\nqodefCustomMobileHeader.initDropDownMobileMenu();\r\n}\r\n},\r\ninitMobileHeaderOpener: function (holder) {\r\nvar $opener = holder.find('.qodef-custom-mobile-header-opener');\r\nif ($opener.length) {\r\nvar $navigation = holder.find('.qodef-custom-mobile-header-navigation');\r\n$opener.on(\r\n'tap click',\r\nfunction (e) {\r\ne.preventDefault();\r\nif ($navigation.is(':visible')) {\r\n$navigation.slideUp(450);\r\n$opener.removeClass('qodef--opened').attr('aria-expanded', 'false');\r\n} else {\r\n$navigation.slideDown(450);\r\n$opener.addClass('qodef--opened').attr('aria-expanded', 'true');\r\n}\r\n}\r\n);\r\ndocument.addEventListener(\r\n'keyup',\r\nfunction (event) {\r\nif (event.key === 'Escape') {\r\nif ($navigation.is(':visible')) {\r\n$navigation.slideUp(450);\r\n$opener.removeClass('qodef--opened').attr('aria-expanded', 'false');\r\n}\r\n} else if (event.key === 'Tab') {\r\nif (typeof event !== 'undefined' &amp;&amp; $navigation.is(':visible') &amp;&amp; !$navigation.is(event.target) &amp;&amp; $navigation.has(event.target).length === 0) {\r\n$navigation.slideUp(450);\r\n$opener.removeClass('qodef--opened').attr('aria-expanded', 'false');\r\n}\r\n}\r\n}\r\n);\r\n}\r\n},\r\ninitDropDownMobileMenu: function () {\r\nvar $dropdownOpener = $('.qodef-custom-mobile-header-navigation .menu-item-has-children &gt; .qodef-mobile-menu-item-icon');\r\nif ($dropdownOpener.length) {\r\n$dropdownOpener.each(\r\nfunction () {\r\nvar $thisItem = $(this);\r\n$thisItem.on(\r\n'tap click',\r\nfunction (e) {\r\ne.preventDefault();\r\nvar $thisItemParent = $thisItem.parent(),\r\n$thisItemParentSiblingsWithDrop = $thisItemParent.siblings('.menu-item-has-children');\r\nif ($thisItemParent.hasClass('menu-item-has-children')) {\r\nvar $submenu = $thisItemParent.find('ul.sub-menu').first();\r\nif ($submenu.is(':visible')) {\r\n$submenu.slideUp(450);\r\n$thisItemParent.removeClass('qodef--opened');\r\n$thisItem.attr('aria-expanded', 'false');\r\n} else {\r\n$thisItemParent.addClass('qodef--opened');\r\n$thisItem.attr('aria-expanded', 'true');\r\nif ($thisItemParentSiblingsWithDrop.length === 0) {\r\n$thisItemParent.find('.sub-menu').slideUp(\r\n400,\r\nfunction () {\r\n$submenu.slideDown(400);\r\n}\r\n);\r\n} else {\r\n$thisItemParent.siblings().removeClass('qodef--opened').find('.sub-menu').slideUp(\r\n400,\r\nfunction () {\r\n$submenu.slideDown(400);\r\n}\r\n);\r\n}\r\n}\r\n}\r\n}\r\n);\r\n}\r\n);\r\n}\r\n}\r\n};\r\n})(jQuery);<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As this code snippet is a bit lengthy, we will try to summarize it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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, <strong>by clicking or tapping the hamburger icon, the <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-make-wordpress-sticky-menu\/\">menu navigation<\/a> will open by sliding down or close by sliding up<\/strong>, depending on if it was previously visible, i.e. open.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <strong>Esc<\/strong> key on the keyboard, which is the same as going through all the links from the mobile menu using the Tab key.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>submenus are opened or closed by clicking or tapping on the right arrows<\/strong> next to corresponding menu items. This is also set by toggling the value of the aria-expanded attribute.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, we have toggled the addition\/removal of a CSS class called qodef&#8211;opened, which serves to add a discreet animation to the right arrows which are placed next to items with submenus. When clicked on,<strong> the right arrows will rotate 90 degrees clockwise<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This concludes our explanation of the JS code which is mostly responsible for the functionality of the mobile menu we created.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/\" target=\"_blank\" rel=\"noopener\">QodeInteractive<\/a> themes can insert this code inside the Custom JS field located in the <strong>Theme Options &gt; General<\/strong> section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_script()<\/a> function. For more on this process, we advise reading our <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enqueue-scripts-wordpress\/\">article on enqueue-ing custom scripts and stylesheets<\/a>. However, we will also show one possible implementation of this process below, as an example.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Example:<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We have saved the code to a file called<strong> custom-mobile-menu.js<\/strong> and uploaded it within the directory of our child theme, via FTP. The code we used to enqueue it then is shown below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function custom_mobile_menu_script() {\r\nwp_enqueue_script( 'custom-mobile-menu-script', get_stylesheet_directory_uri() . '\/custom-mobile-menu.js', array( 'jquery' ), false, true );\r\n}\r\nadd_action('wp_enqueue_scripts','custom_mobile_menu_script');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It shows a function called <strong>custom_mobile_menu_script()<\/strong> that enqueues the script with a unique handle called <strong>custom-mobile-menu-script<\/strong> by using the<strong> wp_enqueue_script()<\/strong> function. The remaining parameters are the path to the file, the dependency from the <em>jquery<\/em> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The file path is specified with the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_stylesheet_directory_uri\/\" target=\"_blank\" rel=\"noopener\">get_stylesheet_directory_uri()<\/a> function, i.e. it is <strong>wp-content\/themes\/child_theme_name\/custom-mobile-menu.js.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, for all to work properly, the whole function is hooked onto the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_scripts\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_scripts<\/a> action hook, which is a standard hook for enqueuing scripts and stylesheets that are intended for front-end users.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">#qodef-page-custom-mobile-header {\r\ndisplay: none;\r\nz-index: 100;\r\nheight: 70px;\r\nbackground-color: #fff;\r\n}\r\n@media only screen and (max-width: 1024px) {\r\n#qodef-page-custom-mobile-header {\r\ndisplay: block;\r\n}\r\n}\r\n#qodef-page-custom-mobile-header-inner {\r\nposition: relative;\r\ndisplay: flex;\r\nalign-items: center;\r\njustify-content: space-between;\r\nheight: 100%;\r\npadding: 0 27px;\r\nbackground-color: #fcd4d1;\r\n}\r\n.qodef-custom-mobile-header-opener {\r\nposition: relative;\r\nwidth: auto;\r\npadding: 0;\r\nmargin: 0;\r\nline-height: 1;\r\nbackground: none;\r\nborder: 0;\r\nborder-radius: 0;\r\nbox-shadow: none;\r\noutline: none;\r\ncursor: pointer;\r\n-webkit-appearance: none;\r\nmargin-left: 20px;\r\n}\r\n.qodef-custom-mobile-header-opener svg {\r\ndisplay: block;\r\nwidth: 21px;\r\nheight: auto;\r\nmargin: 3px;\r\n}\r\n.qodef-custom-mobile-header-opener svg .qodef--initial {\r\nfill: none;\r\nstroke: #1e1e1e;\r\n}\r\n.qodef-custom-mobile-header-opener :focus {\r\noutline: 1px solid #1e1e1e;\r\n}\r\n.qodef-custom-mobile-header-navigation {\r\nposition: absolute;\r\ntop: 100%;\r\nleft: 0;\r\ndisplay: none;\r\nwidth: 100%;\r\nmax-height: calc(100vh - 70px);\r\nbackground-color: #fff;\r\nborder-bottom: 1px solid #1e1e1e;\r\npadding: 0;\r\nmargin: 0;\r\noverflow-y: scroll;\r\nz-index: 10;\r\n}\r\n.qodef-custom-mobile-header-navigation ul {\r\nmargin: 0;\r\npadding: 0;\r\nlist-style: none;\r\n}\r\n.qodef-custom-mobile-header-navigation ul li {\r\nposition: relative;\r\ndisplay: flex;\r\njustify-content: space-between;\r\nalign-items: center;\r\nflex-wrap: wrap;\r\nwidth: 100%;\r\nmargin: 17px 0;\r\npadding: 0;\r\n}\r\n.qodef-custom-mobile-header-navigation ul li a {\r\nposition: relative;\r\ndisplay: block;\r\nfont-size: 15px;\r\ncolor: #1f1f1f;\r\n}\r\n.qodef-custom-mobile-header-navigation ul li .qodef-mobile-menu-item-icon {\r\nposition: relative;\r\npadding: 0;\r\nmargin: 0;\r\nline-height: 1;\r\ncolor: #a8a7a7;\r\nbackground: none;\r\nborder: 0;\r\nborder-radius: 0;\r\nbox-shadow: none;\r\noutline: none;\r\ncursor: pointer;\r\n-webkit-appearance: none;\r\nwidth: 26px;\r\nheight: 26px;\r\ndisplay: inline-flex;\r\nalign-items: center;\r\njustify-content: center;\r\nflex-shrink: 0;\r\n}\r\n.qodef-custom-mobile-header-navigation ul li .qodef-mobile-menu-item-icon svg {\r\ndisplay: block;\r\nwidth: 7px;\r\nheight: auto;\r\nfill: #1e1e1e;\r\ntransform: rotate(0);\r\ntransition: transform 0.3s ease;\r\n}\r\n.qodef-custom-mobile-header-navigation ul li .qodef-mobile-menu-item-icon :hover, .qodef-custom-mobile-header-navigation ul li ul li &gt; a :hover, .qodef-custom-mobile-header-navigation ul li ul li.current-menu-ancestor &gt; a, .qodef-custom-mobile-header-navigation ul li ul li.current-menu-item &gt; a, .qodef-custom-mobile-header-navigation &gt; ul &gt; li &gt; .qodef-mobile-menu-item-icon {\r\ncolor: #1e1e1e;\r\n}\r\n.qodef-custom-mobile-header-navigation ul li .qodef-mobile-menu-item-icon :focus {\r\noutline: 1px solid #1e1e1e;\r\n}\r\n.qodef-custom-mobile-header-navigation ul li ul {\r\ndisplay: none;\r\nwidth: calc(100% - 1em);\r\nmargin-left: 1em;\r\n}\r\n.qodef-custom-mobile-header-navigation ul li ul li {\r\nmargin: 8px 0;\r\n}\r\n.qodef-custom-mobile-header-navigation ul li.qodef--opened &gt; .qodef-mobile-menu-item-icon svg {\r\ntransform: rotate(90deg);\r\n}\r\n.qodef-custom-mobile-header-navigation &gt; ul {\r\nmargin: 0 auto;\r\npadding: 22px 50px;\r\n}\r\n.qodef-custom-mobile-header-navigation &gt; ul &gt; li &gt; a {\r\nfont-size: 17px;\r\nline-height: 1.53em;\r\nfont-weight: 500;\r\n}\r\n.qodef-custom-mobile-header-navigation &gt; ul &gt; li &gt; a :hover, .qodef-custom-mobile-header-navigation &gt; ul &gt; li.current-menu-ancestor &gt; a, .qodef-custom-mobile-header-navigation &gt; ul &gt; li.current-menu-item &gt; a {\r\ntext-decoration: underline;\r\n}\r\n.qodef-custom-mobile-header-navigation &gt; ul &gt; li &gt; .qodef-mobile-menu-item-icon :hover {\r\ncolor: #a8a7a7;\r\n}\r\n.qodef-custom-mobile-header-navigation &gt; ul &gt; li &gt; ul &gt; li :first-child {\r\npadding-top: 9px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the code itself, we will not go over it except to mention that, using a simple <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" target=\"_blank\" rel=\"noopener\">media query<\/a>, 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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform\" target=\"_blank\" rel=\"noopener\">transform<\/a> property tied to the <strong>qodef&#8211;opened<\/strong> class, we have achieved the animation of a rotating right arrow.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> section or using a CSS-inserting plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enqueue-scripts-wordpress\/\">enqueue-ing custom scripts and stylesheets<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-code-gif.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]In this article, we have reviewed two different methods of creating mobile menus in WordPress \u2013 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Make your WordPress website mobile-friendly with a mobile menu! We will show you how.<\/p>\n","protected":false},"author":11229,"featured_media":31708,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[173,4,37,36,13],"class_list":["post-31643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-responsive","tag-tips","tag-ui","tag-ux","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/31643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=31643"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/31643\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/31708"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=31643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=31643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=31643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}