Creating an excellent responsive menu for WordPress

Mobile navigation has become one of the hottest topics of discussion among WordPress designers and developers. Irrespective of how beautiful your site is, if it lacks seamless navigation, you're bound to lose vital customers. If you're running a WordPress powered website and are inclined on designing a fabulous responsive menu for the same, then you need not fret. This is a blog which will allow you to learn the technique of designing a remarkable responsive menu for your WordPress portal. So, let's straightaway learn more about this process.

Step 1- Generate a Child Theme

Child theme has been regarded as one of the best ways of customizing the original theme without losing any of the modifications. You can head on with creating a child theme for your WordPress site by simply copying across the header.php file from your currently installed theme and creating an empty functions.php file.

Step 2- Add a new location for the new responsive menu

As the next step, you'll be required to add a new location for the responsive menu. Any new menu added thereafter can be easily assigned to this location without the need for updating the stylesheet on a regular basis. Just add the following code snippet to your theme's functions.php file for adding a new menu location:
PHP
  • 1
  • 2
  • 3
  • 4
function responsive_menu_setup() {/*== Register responsive menu ==*/ register_nav_menu ('Responsive Menu', __( 'Responsive Menu', 'twentytwelve' )); } add_action( 'after_setup_theme', 'responsive_menu_setup' );
To check whether a new menu location has been added or not, simply go to your admin dashboard-> Appearance-> Menus and you'll be able to see two menu locations available for every new navigation menu. Now, we'll be proceeding ahead to creation of a new menu, followed by assigning it to this new location.

Step 3- Add the new menu location to the header

For this, simply open your theme's header.php file, spot the existing call to wp_nav_menu and simply add the below code snippet underneath it:
PHP
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
<?php wp_nav_menu( array( /*== Call Responsive menu ==*/ 'theme_location' => 'Responsive Menu', 'menu_class' => 'mobile-menu' ) );
Executing the above call will generate HTML for the new menu location.

Step 4- Setting specific CSS classes for the navigation menu

Here, I'll be displaying the appropriate menu via the use of @media queries for toggling the display of default and mobile menus. Since by default, WordPress wraps up the menus in a div tag along with a class name that's derived from menu name. Using these class names directly within the stylesheet would require you to update the stylesheet every time a new menu is being assigned to the respective menu location. Therefore, I'll be setting a generic class name for the menu container using wp_nav_menu_args filter. Just go to your theme's functions.php file and add the below mentioned code snippet to it:
PHP
  • 1
  • 2
  • 3
  • 4
function define_class ($args) {/*== Set classes of menu container ==*/ $args['container_class'] = str_replace(' ','-',$args['theme_location']).'-nav'; return $args; } add_filter ('wp_nav_menu_args', 'define_class');
In the above code, you can observe that I've set the container_class to theme location and added '-nav'. Also, I've registered locations viz: primary and primary mobile which will ensure that WordPress outputs two menus separately wrapped in <div class="primary-nav"> and <div class="moblie-menu-nav"> elements.

Step 5- Tweak your CSS stylesheet for controlling the display of responsive menu

As the last step, you simply need to add styling for displaying the appropriate menu on the website. For this, simply open style.css and add the below code snippet to it:
CSS
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
.mobile-menu-nav { /* hide responsive menu from desktop version */ display: none; } @media (max-width: 640px){ .primary-nav {/* hide desktop menu after 640 */ display: none; } .mobile-menu-nav {/* show responsive menu after 640 */ display: block; } }

Output

excellent-responsive-menu Since we're not interested in displaying the mobile menu all the time, we'll choose to hide it by default by setting the value for its display attribute to 'none'. Here, for displaying the mobile menu(while hiding the primary menu) after having reached below a specified screen-size, we simply place the display statements within the related @media query. For instance, in case of TwentyThirteen, the value for screen size is 640px. It is recommended to check your current theme's stylesheet to see as to which @media query would activate the small menu. We're done!

Wrapping Up

Improving the mobile experience of your WordPress website is no less than a mission. Here's hoping the details covered in the above post would help you in creating a responsive menu that would add up to the awesome user experience for your website visitors.
  • Article written by Amanda Cline. I am Amanda Cline working as a Developer with Xicom Technologies Ltd.- Mobile Application Development Company. Apart from this I've gathered an excellent amount of expertise as an IT support personal, blogger, computer programmer, App developer, a mentor and a trainer. You can Contact me Via @amandacline111
  • Nice tutorial, but think you've missed a couple of steps by not showing the CSS for the mobile responsive menu
  • Hi, I saw your post. Its amazing. I had created menu using this and got this one http://puu.sh/lz5ie/79e01e81f0.png But I want to make css as you shown in postlike this http://puu.sh/lz5ds/c47a518773.jpg Can you help me with that?
  • Whahahaw.... Thanks Amanda. This tutorial is important for me. For along day, i try to create a responsive menu for mya template, and i find this article and my problem fix now.
New question is currently disabled!