Optimizing the user experience is always the main task for any site, from blogging sites to eCommerce sites. In addition, now the responsiveness is gradually an essential element to improve the site performance. The number of mobile users, moreover, has already surpassed desktop users for many websites. One of the important elements which you should notice is creating a responsive menu to navigate your audiences easily. If you are having an idea of building a mobile-ready menu, it may be the right place for you. In this post, we will provide you full guide about how to create mobile ready menu.
Don’t worry if you have no coding knowledge, because it is an in-depth tutorial. In this guide, we will show all popular methods for both beginners and more advanced users. On top of that, with this guide, you can create your own slide-in mobile menu, dropdown mobile menu and toggle mobile menu.
Well, let’s get started now.
Method 1: Add a Responsive Menu Using a Plugin
To begin with, one of the easiest ways to create a responsive menu is using a plugin. Because the powerful benefit of WordPress is offering tons of plugins which can expand the functionality of your site. With a few simple clicks within a matter of minutes, you can get the functionality you want.
This method is most preferred for beginners, as it requires no coding. Normally by this way, we will build a hamburger menu which slides out on the mobile screen.
Let’s take a look at the term ‘hamburger menu’.
The hamburger menu or hamburger button is a button in the user interface. This button has a three-parallel-horizontal-line icon; therefore, it is quite easily identifiable. Selection of this button results in a menu of pages or options. About the position, it is often placed on the top left or top right on apps or mobile devices. Gradually this kind of button is also applied on desktop sites. The huge strength of this menu is saving a lot of space for the site and make the content stand out.
To create this menu, you will have many options. Among them, the Responsive Menu plugin is highly recommended for you.
1. Firstly, install and activate the plugin.
2. Upon activation, you will see the Responsive Menu tab on the WordPress admin bar. Click on it to configure the plugin.
- Enter the width of screen at which the plugin will start creating responsive menu (800px is the default value)
- Select the menu you use for the responsive menu. If you don’t have available menus, then you can create a new one by accessing to Appearance > Menus, and follow the detailed instructions.
- Add a CSS class for your current non-responsive menu. This will hide your non-responsive menu on smaller screens.
3. Click on the Update Options button to save your settings.
Now you can visit your site and resize the browser screen to enjoy the responsive menu. This plugin offers many options to custom the behavior and appearance of your menu. Thus, you can adjust all options on the plugin’s settings page.
Method 2: Add a Drop Down Select Menu Using a Plugin
Another way to add a responsive menu is by adding a drop down select menu. This way seems like the first one which takes an advantage of WordPress plugins. This does not require any coding skills, so it is recommended for beginners.
With an easy-to-use plugin, creating a drop down menu has never been easier. If you want to get a drop down menu, you should consider the Responsive Select Menu plugin.
1. Similar to the first method, you have to install and activate this plugin.
2. Upon activation, visit Appearance > Responsive Select to configure the plugin settings.
3. And then scroll down to Activate Theme Locations section, you will see the default setting applied for all theme locations. But you can change that by turning it on for specific theme locations.
4. Click on the save all settings button to save all your changes.
Now you can visit your site and resize browser screen to view the performance of responsive select menu.
Method 3: Create Mobile Ready Menu with Toggle Effect
Apart from using plugins, you can create a menu on mobile screens by using the toggle effect. But remember that this technique requires some custom code to your WordPress site. So if you haven’t done it before, please consider carefully.
Here is the detailed instruction for creating a mobile friendly responsive menu with the toggle effect.
1. Open a text editor such as Notepad and paste the following code.
7. Finally, add CSS to ensure that your menu uses the right CSS classes for toggle to work well on mobile devices.
You can now visit your website and resize the browser screen to see your responsive toggle menu in action.
Method 4: Add a Slide-In Mobile Menu in WordPress
If you want to add a slide-in panel menu to your WordPress site without using plugins, this technique is for you. However, it also requires you to add code like the method 3. So, make sure that you add the right code to your theme’s file.
2. Save this file as slidepanel.js to your computer.
Note: This depends on your theme, so you can custom the CSS to avoid conflicts.
A mobile-friendly menu will make your site look clearer and still ensure the easiest navigation for your site visitors. This guide has covered four main ways to add a responsive WordPress menu on mobile devices, including both coding and noncoding ways. Thus, you can still create your own mobile menu without having any coding skill. With this guide, we hope that you can achieve in-depth knowledge about how to create mobile ready menu.