How to Create an Awesome WordPress Responsive Menu for Your Theme

Building responsive menus is the hottest trend today. And this hardly comes as a surprise since we witness more and more Internet users leaning towards websites that give them a great browsing experience, irrespective of attractive they look. The navigational structure indeed plays a huge role in determining how good the user experience is.

The WordPress developers and designers invest great efforts to ensure that the websites they are building have menus that adaptable to varying set of operating systems and screen sizes. It is immensely important that your website’s menu adapts itself seamlessly in accordance with diversified devices – be it desktops systems, or comparatively smaller tablets, or the smallest screen-sized Smartphones. Talking of phones, for instance, the long menus are not suited for their screen.

Now, if you are struggling to make your website’s menu work responsively across different OS platforms and devices, you can read this easy-to-follow tutorial and learn the requisite steps for creating wordpress responsive menu.

To Begin With, Create a Child Theme

There are still webmasters who haven’t adopted the practice of performing customizations on the child themes. The biggest incentive to making the required changes in the child theme is that your original theme remains untouched. Thus, if you end up making errors during customization, they will not hamper your original theme. Also, you can update the original theme anytime you want because the upgrades will not be lost.

Now, Let’s Have a New Menu Location

The next step involves having a new menu location for our mobile menu. What this does is that it makes our exercise much more scalable because when you are making edits to the menu location instead of a menu, you get the freedom to add new menus to the location. Thus, no need arises to make any changes to stylesheet.

Now, for adding a new menu location to your theme, all you got to do is to add the following code to your functions.php file:

[cc lang=”php”]function extra_setup() {
register_nav_menu (‘primary mobile’, __( ‘Navigation Mobile’, ‘mytheme’ ));
}
add_action( ‘after_setup_theme’, ‘extra_setup’ );[/cc]

Once you add this code, the changes will be reflected in the backend. Just go to Appearance>Menus. In there, you will find two menu locations as your options. All you need to do now is create a new menu, and assign it to one of the two menu locations you have with you.

Adding the Menu Location We Just Created to the Header

In order to carry this addition out, we will open the header.php file, find our wherefrom the call to wp_nav_menu is being made and then add this code below that:

[cc lang=”php”]
wp_nav_menu( array( ‘theme_location’ => ‘primary mobile’, ‘menu_class’ => ‘nav-menu’ ) );
[/cc]

This one line code goes on to generating HTML for the new menu location.

Finalizing the CSS Classes

Now, to make sure that the correct menu is being displayed, @media queries will be used which will perfrom the toggling of menu displays.

As a default, the WordPress setup encloses menus within the div tag. Accompanying it is the class name that we fetch from the menu name, now, in order to make sure there is a flexibility to our approach, we create new generic class names for the menu container. The wp_nav_menu_args filter will do the job for us. Again, we need to make changes to the functions.php file:

[cc lang=”php”]
function set_container_class ($args) {
$args[‘container_class’] = str_replace(‘ ‘,’-‘,$args[‘theme_location’]).’-nav’; return $args;
}
add_filter (‘wp_nav_menu_args’, ‘set_container_class’)
[/cc]

We aren’t performing a very complex operation here. We are just assigning the container_class to the theme location and following it by adding ‘-nav’.

Making Stylesheet Changes In Order to Dictate the Menu Display

Now it comes to adding the appropriate style, for which we will add the following code to the style.css file:

[cc lang=”css”]
.primary-mobile-nav {
display: none;
}

@media (max-width: 710px){

.primary-nav {
display: none;
}

.primary-mobile-nav {
display: block;
}

}
[/cc]

When the mobile menu has to be made invisible, its display attribute will be set to none. And for displaying the mobile menu instead of the primary menu, you got to position the display statements within the respective @media query.

Apparently, you have the freedom of adding n number of menus and and also the screen-sizes, for which all you got to do is to add more menus in the steps described above. Do let us know if you employ more techniques to create responsive menus for your WP theme.

Author Bio:
Rick Brown is a veteran mobile application developer for Mobiers Ltd – a leading iPhone app development company. You can get his best consultation or advices in case, you are willing to explore more information for the same.