How to Create a Mobile-Ready Responsive WordPress Menu

This is an in-depth tutorial. We will show both the plugin method for beginners (no coding) and the coding method for our more advanced users. By the end of this tutorial, you will learn how to create a slide-in mobile menu, dropdown mobile menu, and a toggle mobile menu. Ready? Let’s get started.

    This technique is easier and better for novices because it demands no client coding. In this technique, we will make a hamburger menu which can slide on the screen of your mobile.

---

First of all you need to do the installing and activating process with the Responsive Menu plug-in. If you want to read more details, look on our instruction about installing a plug-in of WordPress. After the activation, the plug-in will add a new menu item labeled ‘Responsive Menu’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

First of all you need to introduce the width of screen in this moment the plug-in will begin to show responsive menu. The reserved value is 800px that have to work for majority websites. After that, you have to choose the menu you would like to utilize for your responsive menu. If you still haven’t established a menu, so you can make one by attendance Appearance » Menu. Look our instruction on how to append navigation menu in WordPress for particular instructions. Last option on the screen is to provide a CSS class for your current non-responsive menu. This will allow the plugin to hide your non-responsive menu on smaller screens. Don’t forget to click on the ‘Update Options’ button to store your settings. You can now visit your website and resize your browser screen to see the responsive menu in action.

The responsive menu plugin comes with many other options which allow you to change behavior and appearance of your responsive menu. You can explore these options on plugin’s settings page and adjust them as needed.

Other method to append a responsive menu is by appending a drop down select menu. This technique doesn't demand any code experience, so it is the best method for novices.

The choosing of responsive menu

First of all you need to do the installing and activating process with the Responsive Menu plug-in. If you want to read more details, look on our instruction about installing a plug-in of WordPress. After activation, you have to attendance Appearance » Responsive choose to configure plug-in settings.

---

You have to scroll down to ‘Activate theme locations’ divide. By default, the plug-in is activated on all topic locations. You can vary it by selectively conversion on for certain theme locations. Remember that you need to click on the key Saving all installation to store your alterations. You can presently attendance your website and resize browser screen to look on responsive select menu in work.

---

One of the most overall utilized technique to show a menu on mobile screens is by the help of the switch action. This technique demands you to append custom key to your WordPress data set. If you haven’t produced this before, thereat look at our instruction on pasting snippets from internet in WordPress. First of all you have to open a text redactor, for example notepad and paste this code. After this toy need to append CSS so that our menu utilizes the correctly CSS classes for switch to work when viewed on mobile phones.

Other common method is to append a mobile menu with the help of using a slide-in panel menu (as you can see in Technique1). Technique 4 requires you to append code to your WordPress theme files, and it is just a different way of accomplishing the same results as Technique 1. First of all, you have to open a plain text redactor, for example Notepad and append the special code to a blank text file. Remember that you need to replace example.com with your personal name of the domain and your theme with your actual theme directory. Save this file as slidepanel.js to your desktop. After that you will need a picture that you will use as an icon of the menu. An icon of a hamburger is most generally utilized as the menu icon. You will see tons of such pictures from various internet sites. We will use the menu icon from Google Material Icons library. Now you see a picture that you want to use, save it as menu.png. After that, you need to open a FTP customer and upload slidepanel.js file to /wp-content/your-theme/js/ folder. If your theme catalog doesn't have the JS folder, so you have to establish tit and then upload your file. After this process you have to upload menu.png file to /wp-content/themes/your-theme/images/ folder. Once the files are uploaded, we need to be convinced that your theme affluence the JavaScript file you add in this moment. We will reach this by enqueuing the JavaScript file. Append this code to your theme’s functions.php file. Notice that your theme’s navigation menu is still there. We have just wrapped it around HTML that we need to trigger slidepanel menu. Last step is to add CSS to hide the menu image icon on larger screens. You will also need to adjust the position of the menu icon. Depending on your WordPress theme, you may need to adjust the CSS to avoid conflicts.