WordPress Responsive Top Navigation Menu

Code a Responsive Top Navigation Menu 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 file name 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 = */
    }

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.