How to Create a Responsive Menu for Your WordPress Theme

Making your WordPress site accessible on mobile devices starts – but doesn’t end – with the installation of a responsive theme.

Navigation is hugely important to the user experience of any site and forcing menus designed for much larger devices onto mobile users could undo all the good work of the responsive design.

Here’s five simple steps to add mobile-specific menus to your responsive theme and provide an awesome viewing experience for your mobile visitors.

There are number of reasons why smaller screens deserve their own navigation:

• Limited Real Estate: a long menu may simply not fit on a mobile screen. Menus on smaller devices need to shorter and deeper than their desktop counterparts.
• Changing the Priority of Pages for Mobile Users: it may be that mobile users have a different set of popular pages to desktop users (check your analytics now!) and so it makes sense to give these pages a higher priority in your navigation.
• Providing Mobile-only Versions of Pages: you may want to deliver a different version of the same page for mobile users and changing the page link in the navigation allows you to do this.

There are two options for providing platform-specific menus. One is to determine the platform from the browser making the request and then output the appropriate menu. The other is to output all menus and then make use of @media queries in the stylesheet to only show the appropriate menu. Whilst the @media query approach does mean outputting HTML that may not be used, it is consistent with responsive design and so that’s the option we are going to look at here. We’ll be working with the TwentyThirteen theme shipped with WordPress 3.6.

Step 1 – Create a Child Theme

If you don’t already have a child theme then create one now! Apart from being best practice, it makes customisation much easier, keeps the original theme in tact and will enable you to update the original theme without losing all your modifications. Copy across the header.php from your current theme and create an empty functions.php.

Step 2 – Add a New Menu Location

Adding a menu location to house our mobile menu will make the solution far more flexible. Working with a menu location rather than with a specific menu will enable new menus to be assigned to the location without any need to update the stylesheet. To add a new menu location, add the following to functions.php:

function extra_setup() {
register_nav_menu ('primary mobile', __( 'Navigation Mobile', 'twentythirteen' ));
}
add_action( 'after_setup_theme', 'extra_setup' );

Now when you go to Appearance > Menus in the backend of your WordPress installation, you’ll now see two menu locations as possible options for a menu. Create a menu and assign it to the new location so that you have something to test with.

Step 3 – Add the New Location to the Header

Open up header.php, find the existing call to wp_nav_menu and add the following immediately underneath:

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

This call generates the HTML for our new menu location.

Step 4 – Set the CSS classes for the menus

To show the appropriate menu, we are going to make use of @media queries to toggle the displaying of the primary and mobile menus.

By default, WordPress wraps menus in a div tag with a class name derived from the menu name. Whilst we could simply use these class names in our stylesheet, that would mean having to update the stylesheet every time a different menu is assigned to a location. To maximize flexibility we will set our own more generic class name for the menu container. We can do this very simply by using the wp_nav_menu_args filter.

Go back to your functions.php file and add the following:

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')

All we are doing here is setting the container_class to the theme location (replacing spaces with hyphens) and adding ‘-nav’. We have registered the locations primary and primary mobile so WordPress will now output our 2 menus wrapped in <div class=”primary-nav”> and <div class=”primary-mobile-nav”> elements respectively.

Step 5 – Amend the Stylesheet to Control Menu Display

Our final step is to add the styling to only show the appropriate menu. Open styles.css and add the following:

.primary-mobile-nav {
display: none;
}
@media (max-width: 643px){
.primary-nav {
display: none;
}
.primary-mobile-nav {
display: block;
}
}

Generally, we don’t want the mobile menu to show so we’ll hide it by default by setting its display attribute to none.

To ensure that we only show the mobile menu (and hide the primary menu) when we get below a certain screen-size, we place the display statements within an appropriate @media query. For the TwentyThirteen theme it’s at 643px but you’ll need to check your theme’s stylesheet to see which @media query activates the small menu.

Of course, you can add any number of menus and target multiple screen-sizes just by adding more menus in steps two and three and updating the stylesheet with the appropriate @media queries.

Just five quick and easy steps to add awesome mobile menus to your responsive WordPress theme and provide your non-desktop users with a far better and more tailored experience.

What other steps do you take to improve the mobile experience for your visitors? Do you even take any steps? Tell us in the comments below.

Tags:

• mobile