SHARE

menufication-slide (1)

In order to make your website look rich and function smoothly, it is absolutely essential to equip the same with a responsive theme. It is a mobile-responsive theme which offers a uniform look and feel to your entire website, irrespective of the screen device that is being chosen for viewing it. A crucial website element that expects a strict consideration is the top or side menu. Having large menus for a plain desktop-oriented website will definitely render a poor user experience on the mobile device- expecting the visitors to indulge in unnecessary scrolling for viewing a specific piece of information. Thanks to the inception of responsive menus, you’ll no longer have your visitors move away to your competitor’s site due to a poor user experience. In today’s post, I’ll be taking a closer look at the stepwise approach to build a responsive menu in WordPress using media queries and WordPress APIs.

Understanding the significance of having a responsive menu for your WordPress website

Website elements are displayed differently on different types of devices. Viewing a significance of having a responsive menuWordPress site on larger screen will be quite different from accessing it using a smartphone or a smart tablet. Likewise, having long menus won’t work for your site when displayed using smaller screens. It is here that the criticality of having a separate responsive meny for smaller screen size serves as a sigh of relief. Since your website is used differently by desktop and mobile users, it is recommended to have the menu items displayed in a different order for both types of audiences.

Now, let’s head towards the steps that you need to follow for building a responsive menu in WordPress

Step 1- Create a Child Theme

child theme

As the very first step, we’ll be creating a child theme for our parent theme(here, it is twentyfifteen). For this, just create a folder wp-content\themes\twentyfifteenchild and within this folder, add a style.css which includes the below content:

/*
Theme Name:     Twenty Fifteen child different responsive menu
Description:    Child to responsive menu in WordPress
Author:         the WordPress team
Template:        twentyfifteen
Version:        1.2
*/
@import url("../twentyfifteen/style.css");

With the above code, I’ve specified meta data for the child theme. Here, the template field denotes that both the child theme as well as the parent theme is twentyfifteen. Also, @import url(“../twentyfifteen/style.css”); will be used for importing twentyfifteen style.css into the child theme’s style.css so as to fetch all the styles available for the parent theme.

Step 2- Activate the above created child theme

After having created the child theme and adding the style.css to it, you’ll be able to view the child theme within the admin area as shown in below screen-shot:

activate

Here, click on the “Activate” button to activate the child theme for your WordPress website.

Step 3- Register the Mobile responsive menu

As per this step, we’ll be adding the mobile menu which will be used for the mobile-friendly version of your WordPress website. Here, firstly create a new functions.php file using the below mentioned code:

<?php
function twentyfifteenchild_setup() {
register_nav_menu( 'primary-mobile-menu', __( 'Mobile Menu', 'twentyfifteenchild' ) );
}
add_action( 'after_setup_theme', 'twentyfifteenchild_setup' );
?>

On observing the above code carefully, you’ll find that I’ve hooked into action after_setup_theme of WordPress, followed by calling the function twentyfifteenchild_setup. Within this function, we’ll be registering a new custom menu i.e. “primary-mobile-menu”  using register_nav_menu function of WordPress. With this, you’ll be able to view the custom menu within the WordPress back-end panel. Have a look at this screen-shot:

display of primary menu

Step 4- Display the mobile menu in header.php

For this, you just need to some code into an exact copy of the header.php file that already exists for the base theme(in this tutorial, it is twentyfifteen):

<?php wp_nav_menu( array( 'theme_location' => 'primary-mobile-menu', 'menu_class' => 'menu-mobile' ) ); ?>

Step 5- Add specific links to be displayed on the mobile menu

Next, just go to your WordPress menu admin area and create a new mobile menu. To this, add specific links which you want to be displayed on the responsive menu. Choose to attach this menu to the primary mobile menu’s theme location. Here’s a screen-shot for this step:

adding the menu

If you’ve done everything correctly till now, then you should be able to see two menus on your WordPress website viz: primary menu and primary mobile menu. The same is visible within the screen-shot below:

creating menu

Step 6- Style the Mobile menu

Now that we’re done with creating the mobile menu, we’d want to show it up only on mobile devices with the normal menu visible only on larger screens. This can be achieved with the CSS media queries. Firstly, add the below code to style.css for preventing the mobile menu from being displayed by default:
.menu-mobile {

display: none; }

Next, each time the WordPress website is being viewed on a mobile screen, we’d want to hide the main menu and display only the primary-mobile menu. Plus, we’d also want to add extra styles like color, corder etc. for highlighting menu items. For this, simply add the below code to the style.css:

/* Mobile portrait mode */
@media only screen and (max-width : 320px) {
.menu-mobile {
display: block;
}
.menu-mobile a{
display:inline-block;
font-size:15px;
color:#333;
border: solid;
padding: 5px;
}
.nav-menu {
display:none;
}
}
/* Mobiles landscape mode */
@media only screen and (min-width : 321px) and (max-width : 480px) {
.menu-mobile {
display: block;
}
.menu-mobile a{
border: solid;
padding: 5px;
text-decoration:none;
}
.nav-menu {
display:none;
}
}

With the above code, I’ve used media queries which come into action only when the screen size matches the one specified by us. Therefore, each time your WordPress website is being viewed on a small screen, only the mobile menu will be visible as shown in the below screen-shot:

 

Conclusion

Menus are undoubtedly the best tools for making it convenient for website visitors to access different sections of your website. Here’s hoping the above post would have helped you in understanding the process of achieving a responsive menu for the website’s mobile visitors. So, get started with developing your mobile menu now!

 

 Guest Post published by working as a senior developer with Xicom Technologies Ltd. –  Mobile App Development Company.

LEAVE A REPLY