{"id":24823,"date":"2021-05-30T15:00:51","date_gmt":"2021-05-30T13:00:51","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=24823"},"modified":"2021-06-02T14:21:11","modified_gmt":"2021-06-02T12:21:11","slug":"how-to-hide-wordpress-mobile-menu","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-hide-wordpress-mobile-menu\/","title":{"rendered":"How to Hide Your WordPress Mobile Menu"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]With the number of <a href=\"https:\/\/www.broadbandsearch.net\/blog\/mobile-desktop-internet-usage-statistics\" target=\"_blank\" rel=\"noopener\">mobile internet users surpassing desktop ones<\/a>, it\u2019s no surprise that website designers go out of their way to cater to them. Having a mobile version of a website, or even <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-plugins-for-turning-wordpress-to-mobile-app\/\">converting a website into a mobile app<\/a> has become the norm. The reason for that is simple: <strong>different aspect ratios and different resolutions require different modes of display for different features<\/strong>, or different features altogether. This is called responsive design: different versions for different screen sizes. And one of the features that presents problems to designers and users of hand-held devices is the menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Menus can be large, complicated, and cumbersome for mobile users who, by the very nature of their devices, have limited screen space. This is why many <a href=\"https:\/\/qodeinteractive.com\/\">premium WordPress themes<\/a> are equipped with mobile menus. Still, you may have a theme which looks and works exactly the way you want it that simply lacks this option. So, if you want to hide your mobile menu or maybe replace it with another, you have us to help you with that. This is what we\u2019ll be talking about:[\/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=\"#hide-wordpress-mobile-menu-using-code\">How to Hide Your WordPress Mobile Menu Using Code<\/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=\"#hide-elements-of-wordpress-mobile-menu-using-code\">How to Hide Elements of Your WordPress Mobile Menu Using Code<\/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=\"#hide-wordpress-mobile-menu-using-plugin\">How to Hide Your WordPress Mobile Menu Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[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=\"hide-wordpress-mobile-menu-using-code\"><\/a>How to Hide Your WordPress Mobile Menu Using Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]The first thing we would like to show you is how to hide a menu or parts of a menu on mobile devices using CSS. This will require a little coding on your part, and also the use of the <a href=\"https:\/\/qodeinteractive.com\/magazine\/browser-inspect-element-tool-in-wordpress\/\">inspect tool<\/a>, but it\u2019s no big deal either way.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In order to hide the whole menu, you need to find out the identifier and the CSS class of your menu. That can vary from theme to theme, which is where the inspect tool comes in handy. Simply right-click anywhere on your website, provided you haven\u2019t <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-disable-right-click-wordpress\/\">disabled right-clicking<\/a>, and select <strong>Inspect<\/strong> from the drop-down menu. You can also press the F12 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=\"612\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Inspect-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Inspect-768x485.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Inspect-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, having turned on the inspect tool, you can scroll down the <strong>Elements<\/strong> tab to highlight the elements in the main view. You can easily find the menu in the desktop version of your website, but that\u2019s not the one you need to hide. Instead, you need to resize your screen to show the narrower view by dragging the vertical edge of your window. The class we want to hide on the mobile version of our website is called <em>menu-button-container<\/em>. Note that on your website the class might be named differently.[\/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=\"590\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Narrow-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Narrow Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Narrow-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Narrow-Menu-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Narrow-Menu-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Narrow-Menu-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to hide this particular version of the menu from the mobile version of the website, you need to add some CSS to your website. Navigate to <strong>Appearance\/Customize<\/strong> from your WordPress dashboard and select the <strong>Additional CSS<\/strong> section and the <strong>Mobile<\/strong> version of the website. You can switch between the different versions of your website in the bottom left hand-side menu. Click the mobile icon to edit the mobile version of the 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=\"561\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Additional-CSS-Mobile.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS Mobile\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Additional-CSS-Mobile.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Additional-CSS-Mobile-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Additional-CSS-Mobile-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Additional-CSS-Mobile-620x359.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The code you need to enter into the <strong>Additional CSS<\/strong> field is:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.menu-button-container {\r\ndisplay:none;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have done that, you can see that the menu has disappeared from the preview window. In order to save your changes, you need to click the <strong>Publish<\/strong> button, and your mobile menu will not appear in the mobile version of 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=\"675\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hidden-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Hidden Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hidden-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hidden-Menu-300x209.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hidden-Menu-768x535.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hidden-Menu-620x432.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you will need to replace the <em>menu-button-container<\/em> with the class of your own mobile menu.[\/vc_column_text][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=\"hide-elements-of-wordpress-mobile-menu-using-code\"><\/a>How to Hide Elements of Your WordPress Mobile Menu Using Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]But what if you don\u2019t want to hide the entire menu? Hiding only a couple elements will make it shorter and more easily navigable for your mobile device-using visitors.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In order to hide any one element, you will, again, need to add some CSS to the menu. First, navigate to <strong>Appearance\/Menus<\/strong> from your WordPress dashboard, click <strong>Screen Options<\/strong> in the upper right-hand side, and check <strong>CSS Classes<\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Screen-Options.jpg\" class=\"attachment-full size-full\" alt=\"Screen Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Screen-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Screen-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Screen-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Screen-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, say we want to hide the <strong>Team<\/strong> element from our Main Menu for mobile users. Clicking on it now, you will see that you have enabled a field labeled <em>CSS Classes (optional)<\/em>. Here, you can assign a class to a menu element. We will assign the class <em>hide-on-mobile<\/em> to the <strong>Team<\/strong> element and <strong>Save<\/strong> our menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can name your classes whatever you like, within these naming rules: a class must begin with a letter (uppercase or lowercase) and use letters, digits, underscores, and hyphens in the rest of the name.<br \/>\n[\/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\/05\/Hide-On-Mobile.jpg\" class=\"attachment-full size-full\" alt=\"Hide On Mobile\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-On-Mobile.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-On-Mobile-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-On-Mobile-768x491.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-On-Mobile-620x397.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This merely labels the <strong>Team<\/strong> element in our Main Menu as belonging to the class<em> hide-on-mobile<\/em>. In order to actually hide all elements of this class from the mobile version of the website, we need to add &#8211; you guessed it &#8211; some code to our website. Navigate to <strong>Appearance\/Customize<\/strong> from your WordPress dashboard and select the <strong>Additional CSS<\/strong> section.[\/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=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Add-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Add CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Add-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Add-CSS-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Add-CSS-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Add-CSS-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The code you need to add into the<strong> Additional CSS<\/strong> field is this:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@media (max-width: 767px){\r\n.hide-on-mobile{\r\ndisplay: none !important;\r\n}\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code hides all elements belonging to the <em>hide-on-mobile<\/em> class when the width of the website is 767 pixels or less. Of course, you can do this for any individual menu element, hiding or showing different elements for different devices.[\/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=\"hide-wordpress-mobile-menu-using-plugin\"><\/a>How to Hide Your WordPress Mobile Menu Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]As is very common, if a theme doesn\u2019t work exactly the way you like it, you can supplement it with a plugin. The plugin we will be using is <a href=\"https:\/\/wordpress.org\/plugins\/mobile-menu\/\" target=\"_blank\" rel=\"noopener\">WP Mobile Menu<\/a>. Mind, though, that there are plenty of <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-menu-plugins\/\">responsive menu plugins<\/a> to choose from.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have installed and activated the plugin, you will be automatically taken to a screen prompting you to accept some additional security features by the same developer. We will skip them.<br \/>\n[\/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=\"416\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Plugin.jpg\" class=\"attachment-full size-full\" alt=\"Mobile Menu Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Plugin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Plugin-300x129.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Plugin-768x330.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Plugin-620x266.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will then be taken to the plugin\u2019s configuration screen. The first section up is the <strong>Main Options<\/strong> section. There, you need simply to toggle both the left and the right menu off. In the <strong>Visibility Settings<\/strong> further down, you need to toggle the <strong>Enable only in Mobile devices<\/strong> toggle to <em>On<\/em>.[\/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\/05\/Mobile-Menu-Visibility.jpg\" class=\"attachment-full size-full\" alt=\"Mobile Menu Visibility\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Visibility.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Visibility-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Visibility-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Visibility-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Further down, in the <strong>Hide Original Theme Menu<\/strong> section, you need to make sure all the menu elements are checked to be hidden by 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=\"466\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original.jpg\" class=\"attachment-full size-full\" alt=\"Hide Original\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Depending on the theme you are using, you may need to use the <strong>Find element<\/strong> search in case one of your menu elements is unconventionally named and the plugin doesn\u2019t recognize it. This may vary from theme to theme, so we can\u2019t be any more specific, but most themes will use conventional elements.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once done, <strong>Save Changes<\/strong>, and visit your website from a mobile device. You will see that the menu does not appear.[\/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\/05\/Mobile-Menu-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Mobile Menu Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But what if you just want a different version of a menu for mobile devices? Actually, that is this plugin\u2019s primary function. In that case, you will need to create a menu for the mobile version of your website. We won\u2019t go into the details of creating a new menu here. If you need help creating a menu, we have a full <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-navigation-menu-in-wordpress\/\">tutorial on adding menus<\/a> in WordPress. Remember to check <strong>Left Mobile Menu<\/strong> or <strong>Right Mobile Menu<\/strong> when creating a mobile menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will nonetheless use this space to say that a mobile menu should be as pared-down as possible, all the way to the very basics. We advise you to use only the basic navigation options for the mobile version of your menu. Your mobile users are more likely to use a <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-search-to-menu-wordpress\/\">search bar<\/a> if they are after a specific page.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have created and saved a menu, navigate to <strong>Mobile Menu Options<\/strong> from your WordPress dashboard.[\/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\/05\/Mobile-Menu-Options.jpg\" class=\"attachment-full size-full\" alt=\"Mobile Menu Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Mobile-Menu-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here, in the <strong>Main Options<\/strong> section, you need to select your mobile menu for display. We have named ours <em>Mobile Menu<\/em>, but you can name yours whatever you want. You can also toggle to enable left and right menus. Mind that you will need to have the menu display position checked on the menu creation screen.[\/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=\"560\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menu-Config.jpg\" class=\"attachment-full size-full\" alt=\"Menu Config\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menu-Config.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menu-Config-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menu-Config-768x444.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menu-Config-620x358.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down, you have the <strong>Visibility Options<\/strong> section. These govern the conditions under which the mobile menu appears. In order to show your mobile menu, you need to make it visible for mobile devices..[\/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=\"514\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Visibility-Options.jpg\" class=\"attachment-full size-full\" alt=\"Visibility Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Visibility-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Visibility-Options-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Visibility-Options-768x407.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Visibility-Options-620x329.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, in the<strong> Hide Original Theme Menu<\/strong> section, you can choose which menu elements to hide from the mobile version. This is an effective way of creating a mobile version of a menu, if you know your way around its structure. Most common menu elements are checked for hiding by default.[\/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=\"474\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Hide Original Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original-Menu-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original-Menu-768x376.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Hide-Original-Menu-620x303.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Further down are some miscellaneous and advanced options which allow you to further customize your mobile menu. We won\u2019t go into the details here, as they are not relevant to showing or hiding mobile menus.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will need to <strong>Save Changes<\/strong> once you are done configuring your 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\/05\/Save-Changes.jpg\" class=\"attachment-full size-full\" alt=\"Save Changes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Save-Changes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Save-Changes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Save-Changes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Save-Changes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And our mobile menu, with just the very basics, appears in the mobile version of our website. Your original mobile menu is hidden, and a new one is in its place.<br \/>\n[\/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\/05\/Bridge-Mobile-Menu-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Bridge Mobile Menu Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bridge-Mobile-Menu-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bridge-Mobile-Menu-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bridge-Mobile-Menu-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bridge-Mobile-Menu-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\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\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we have shown, creating, showing and hiding mobile menus and creating alternate versions of menus takes only a little work, and there are even plugins which can do most of the work for you. Whatever kind of website you\u2019re operating, chances are a large part of your visitors is using mobile devices. While creating a whole alternate version of your website may be too cumbersome for you, making one small adjustment is no trouble at all. No reason, then, not to make it.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Hide your mobile menu and create a better experience for your visitors. We will show you how!<\/p>\n","protected":false},"author":16990,"featured_media":24966,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-24823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/24823","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\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=24823"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/24823\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/24966"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=24823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=24823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=24823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}