WordPress Tutorials

Win In Mobile Internet Era? Start With A Mobile-Ready Responsive WordPress Menu

As smartphones and other mobile devices have become the preferred method of internet access, mobile online shopping time now exceeds laptop and PC online shopping time. If you think mobile is just a must for e-commerce sites, you’re all wet. People nowadays are increasingly doing all sorts of online research using mobile devices. So, if your WordPress isn’t mobile-friendly, it will be penalized by Google and displayed as a less legitimate search result, ending up with losing business.

To accommodate the fast increasing internet users who preferred to accessing online content on tablet or smartphone devices, you need a responsive WordPress menu. Here’s some simple yet useful methods to add a mobile-ready responsive WordPress menu to your WordPress site that offers an awesome viewing experience for your mobile visitors.

Add A Responsive WordPress Menu Using A WordPress Plugin

Undoubtedly, leveraging the power of a free or premium WordPress plugin is the quickest and easiest way to make the navigation system of your WordPress website more user friendly and easier to use. Some widely used plugins include Responsive Menu, WP Responsive Menu and UberMenu Premium Mobile Menu.

Here we take the Responsive Menu free WordPress plugin as an example, show you how to create a responsive menu in your WordPress website quickly, even when you’re a non-techie user.

Step 1: Installation and Activation

To install the WordPress plugin, you need login to your WordPress admin area and then search for Responsive Menu. After that, click install Responsive Menu and activate it through the Plugins menu in WordPress.

Upon activation, a new menu item in the name of “Responsive Menu” will be added to your WordPress admin toolbar. You can click on it to set your options.

Step 2: Menu Customization

The WordPress Responsive Menu Plugin comes with a list of extensive options for customizing the behavior and appearance of your WordPress menu. You need to determine the menu that you would like to use for your responsive WordPress menu and edit the titles, size, colors, order, position and many other attributes of your menu for getting a more mobile-friendly WordPress website.

Step 3: Update Options

The last step is to click on “Update Options” button to save your settings. Then you will be able to visit your WordPress website and resize your browser screen to ensure it is responsive enough in action.

Creating A Responsive WordPress Menu Using A WordPress Theme

Making use of a responsive theme is another easiest way for beginners to implement a stylish responsive WordPress menu. More and more developers today are automatically making this an important part of the overall design of a theme.

If you are not sure whether your WordPress theme supports responsive design or not, you’d better spend some time checking it out before installation.

Login to your WordPress admin area and find the “Appearance” button on the left sidebar. Click on it to reveal the drop-down menu. Find your WordPress theme and click on the “Customize” button. If you can find the three tiny icons on the bottom left, it means that you can preview your WordPress theme on desktop, smartphone, and tablet devices.

Also, you should focus on whether the menu area of your WordPress site shrinks into three horizontal lines, which is the universal icon for menu items on mobile devices. If not, you may need to consider changing your WordPress theme, however.

Creating A Responsive WordPress Menu With Toggle Effect

For experienced webmasters, using the toggle effect to display a menu on mobile screens is the most common method. If you know how to add custom code to your WordPress files, you will find it really easy and helpful to use this method.

Firstly, you are required to create a Child Theme that inherits the functionality and styling of the parent theme. Using a child theme can make sure your modifications are preserved as well as speed up development time. A Child Theme typically consists of three elements: the child theme directory, functions.php, and style.css. This tutorial will guide you through detailed steps of a Child Theme creation.

Secondly, you need to add a new menu location to house your mobile menu. If you don’t want to update the stylesheet to ensure the new menus will be assigned to the location, you are recommended to work with a menu location instead of a certain menu. Adding a new menu location is not difficult, you just need to add following code to the file functions.php:

Thereafter, navigate to Appearance>Menus in your WordPress admin page and you will find two menu locations under Theme locations: Navigation Menu and Navigation Mobile.

Thirdly, add the new location to the header. To generate the HTML for your new menu location, you should find the existing call to wp_nav_menu by opening up header.php. Then add following code instantly underneath the call:

Fourthly, set the CSS classes for the menus. In order to show the appropriate menu, you will have to toggle the displaying of the primary and mobile menus.

WordPress, by default, wraps menus in a div tag with a class name derived from the menu name. Though it is possible for you to simply use these class names in your stysheet, you are required to update the stysheet every time a different menu is assigned to a location. To make it more flexible, you can choose to set your own generic class name for the menu container through the use of the wp_nav_menu_args filter.

Add the following code to your functions.php file:

Lastly, amend the stylesheet to control menu display. All you’re doing is adding the styling to only show the appropriate menu. Likewise, open styles.css and add the following code:

Usually, webmasters will hide the mobile menu by default through changing the display attribute to none if they don’t want it to show.

In order to make sure your WordPress website displaying only the mobile menu while hiding the primary menu when you get below a specific screen-size, you can place the display statements within an appropriate @media query.

Hopefully this article can help you learn how to get a mobile-ready WordPress responsive WordPress menu. You may also want to see our guide on Advantages of a Mobile-Optimized WordPress Website.

Leave a Reply

Your email address will not be published. Required fields are marked *