Nowadays, most users prefer responsive WordPress themes which are accessible to all kind of mobile devices. One of the significant considerations of WordPress design is navigation. Since the installation of your any responsive theme in your site doesn’t make it accessible to a different kind of mobile devices. You really need to pay attention to the development of responsive design elements that can improve the experience for your mobile visitors.
Being a site owner, you must take care of the responsiveness of the site whether it works well on different gadgets or not. Besides, the navigation bar of your WordPress website must be designed to be mobile friendly that will allow your mobile users to easily navigate the site. This post reveals five basic steps to create responsive navigation menu in WordPress:
If you don’t have a child theme, then you really need to create a new one that makes the customization easier. It will keep the original theme unaffected and allow you to update your theme without losing the modification. Besides, copy the header.php from your existing theme and create empty functions.php.
When you have created a child theme, it’s time to add a new menu location. It will allow new menus to be assigned to the new location without updating the stylesheet. You need to add the following code to functions.php in order to add a new menu location:
1 function extra_setup() {
2 register_nav_menu (‘primary mobile’, __( ‘Navigation Mobile’, 3 ‘twentythirteen’ ));
3 }
4 add_action( ‘after_setup_theme’, ‘extra_setup’ );
Now, go to Appearance > Menus in the admin area, here you’ll find two menu locations options. Here, create a menu and assign it to the new location thus you will have something to test with.
First, open header.php, here find out the existing call to wp_nav_menu and add the below-mentioned code underneath:
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary mobile’, ‘menu_class’ => ‘nav-menu’ ) ); ?>;
This will generate the HTML code for the new location.
In order to set CSS classes for the menus, you will need to use @media queries that will toggle the appearance of the primary as well as mobile menus. By default, WordPress will wrap the menus with a class name originated from the menu name. If you use these class names in your stylesheet, you will have to update the stylesheet when a different menu assigns to the location. In order to maximize flexibility, you can set your more generic class name for the menu box. It is easy to do this by using the wp_nav_menu_args filter. Now, open the functions.php file and add the following code here:
1 function set_container_class ($args) {
2 $args[‘container_class’] = str_replace(‘ ‘,’-‘,$args[‘theme_location’]).’-nav’; return $args;
3 }
4 add_filter (‘wp_nav_menu_args’, ‘set_container_class’)
The last step is to add styling to the relevant menu. For this, you will need to open styles.css and add the following code:
1 .primary-mobile-nav {
2 display: none;
3 }
4 @media (max-width: 643px){
5 .primary-nav {
6 display: none;
7 }
8 .primary-mobile-nav {
9 display: block;
10 }
11 }
All the major process has done, if you don’t want the mobile menu to display, so you can easily hide it setting its display property to none. Moreover, you can add any number of menus and target different screen sizes by simply adding extra menus in 2nd and 3rd step and updating the stylesheet with the relevant @media queries.
With the emergence of smartphones and tablets, responsive websites have become the trend. By using all these quick steps, you can add impressive yet responsive mobile menus to your WordPress theme in order to ensure that your user will have a better and more tailored experience.
Author bio:
Ankur Purohit is an enthusiastic writer and WordPress developer working with Baymediasoft- a leading WordPress development company. He aims at providing informative and relevant information regarding the Magento platform on Twitter and Facebook.