Creating a Responsive Navigation Menu in WordPress

This is an intermediate level tutorial for WordPress developers. In this tutorial I will explain how to add a responsive navigation menu to any WordPress theme using CSS, media queries and Jquery. Later in the tutorial, I will show you a couple different WordPress plugins you can use to get similar results for those of you that do not like to code. Although, I always caution that plugins can often significantly slow down any WordPress installation when too many or the wrong one is used. That is why I always start out most of my tutorials by offering an alternative solution to using a plugin to achieve a solution.

Coding Solution for a Top Nav in WordPress

As promised, here are the steps necessary to code a completely responsive top navigation menu into your current WordPress theme:

  1. If you know what your current theme is. Skip to next step, otherwise go to your WordPress admin dashboard and click on appearance/themes and see which theme is your active theme. Mine is twenty eleven so that is what I will reference in this tutorial, but the same instructions apply to any WordPress theme.
  2. Open the header.php file for your theme in a text editor or from the WordPress admin editor by going to appearance/editor and click on the header.php filename in the right column of the page.
  3. In header.php look for a meta tag for devices. In twenty eleven it looks like this:
    <meta name="viewport" content="width=device-width" />

    And change it to look like this:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  4. Now open your single.php file and search for the nav tag which should be at line number 17 or so. Delete everything in between the opening nav tag and ending nav tag including the tags themselves and replace them with:
    <nav><?php wp_nav_menu( array( 'theme_location' =>  'primary' ) ); ?></nav>
  5. Open your theme’s style css file and append the following CSS styles to the end of it:
    nav select

    {
      display: none; /*= Force dropdown navigation to hide on desktop = */
    }
    @media (max-width: 960px)  
    {
      nav ul     { display: none; } /*= Force normal horizontal navigation to hide mobile devices and ipad = */
      nav select { display: inline-block; } /*= Force dropdown navigation to get displayed on mobile devices and ipad = */
    }
  6. That’s all there is to customizing your WordPress top navigation menu to work great on iPod, Iphone and other mobile devices. Go ahead and check it now on a mobile platform and verify that it works.

    Adding Responsive Navs with WordPress Plugins

    There is also a plugin you may wish to consider for responsive navigation menus. Probably the most simple and straightforward responsive navigation menu plugin available through the WordPress codex is simply called Responsive Select Menu and can be downloaded from http://wordpress.org/extend/plugins/responsive-select-menu/.

    It will give you a nice dropdown navigation menu for mobile devices that looks like the one in the following image:

    nav wp

    The Responsive Select Menu plugin has an easy to use admin that allows you to easily change settings such as width, depth, spacers, excluding items, item names and visibility of items as demonstrated in the following screenshot:

    screen wp

    Another great responsive navigation menu plugin available for only $16 is the Ubermenu plugin seen in the following screenshot:

    ubermenu

    It is much more customizable than the Responsive Select Menu plugin mentioned earlier, but it is also much more complex and offers several more features and a more dynamic and aesthetic design.

    Summary

    There are a lot of possibilities for creating a dynamic and responsive top navigation menu for your WordPress blog or website, but in this tutorial I have gone over three of the best ways I have found to do so. I would suggest using this short list of methods before going out on a massive Google search to find a solution for you. If none of the above solutions look right for you, check the WordPress codex for more options that are free.

    About 

    Ian Lincicome is a web developer and freelance writer with over 20 years experience in web development and writing. He specializes in Web Development, Custom WordPress Development, Programming, Online Application Development, Fiction Writing and Technical Writing. He enjoys sharing his knowledge with others on WPHub.com.

3 thoughts on “Creating a Responsive Navigation Menu in WordPress

  1. in single.php there is no nav tag …
    here it is


    <?php
    get_sidebar( 'content' );
    get_sidebar();
    get_footer();

  2. Very Informative indeed and very well explained. I agree that these methods should really be used before going and searching the solution on Google. Awesome information. Thanks.

  3. A very informative post indeed. Very simple explanation of the methods as well and i definitely agree that one should try these methods before searching for a solution on Google. Great Work.

Comments are closed.