08
12,2016
 |   |  ,  |  0 comments

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.

 

create-mobile-menu-01

 

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.  

But first….

Let’s take a look at the term ‘hamburger menu’.

create-mobile-ready-menu-02

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.

 

create-mobile-ready-menu-03

 

  • 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.

 

create-mobile-ready-menu-04

 

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.   

 

create-mobile-ready-menu-05
2. Save this file as navigation.js on your desktop.
3. Next, open a FTP client and upload this file to /wp-content/themes/your-theme-dir/js/ folder on your WordPress website.
4. Replace your-theme-directory with your current theme’s directory. If your theme directory doesn’t have any js folder, create a new one.
5. Once uploading the js file, make sure that your WordPress site also loads this js. And then add the following code to your theme’s function.php file.
create-mobile-ready-menu-06
6. Now we can add the navigation menu into your theme (normally it is the header.php file in your theme)

create-mobile-ready-menu-08

 

7. Finally, add CSS to ensure that your menu uses the right CSS classes for toggle to work well on mobile devices.

 

create-mobile-ready-11
create-mobile-ready-menu-14 create-mobile-ready-menu-15

 

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.

1. First of all, open a text editor like Notepad, and add this code to a blank text file.
create-mobile-ready-menu-08
Note: Don’t forget to replace example.com with your domain name, and your-theme with your actual theme directory.

2. Save this file as slidepanel.js to your computer.

3. Add an image as a menu icon (commonly a hamburger icon). You can find more menu icon from Google Material Icons library. Save it as menu.png file.
4. Open a FTP client and upload the slidepanel.js file to /wp-content/your-theme/js/ folder. If your theme directory doesn’t have js folder, create it and upload the file.
5. Upload the menu.png file to /wp-content/themes/your-theme/images/ folder.
Once the upload has completed, make sure that your theme loads the js file.
6. Add this code to the function.php file in your theme.

create-mobile-ready-menu-09

 

7. Add the actual code in your theme’s header.php file to display the navigation menu.

 

cearte-mobile-ready-menu-13
8. If you want to wrap the navigation menu with HTML code to show the slide panel menu on smaller screens, add this code:

 

create-mobile-ready-menu-12
Note: The navigation menu of your theme is still there, it has just been wrapped around HTML.
9. Add CSS to hide the menu image icon on larger screens and adjust the position of the menu icon. For example:
create-mobile-ready-menu-10

 

Note: This depends on your theme, so you can custom the CSS to avoid conflicts.

Final thought

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.

You may also want to know more about 10 best WordPress themes for eCommerce. Or if you want to see more our guide, please follow our blogging page.
If you found this article interesting, please share it with your friends. Thank you for reading!
Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0

no replies

Leave your comment