WordPress: Creating a Responsive Navigation Menu

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.

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 2015 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.

Looking for quality WordPress Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , | Posted under WordPress | RSS 2.0

Author Spotlight

TJ Marsh

My name is Tj Marsh. I spend about 16 hours a day on the internet. Running my company and helping out here at Arvixe. I live in the good ole Arizona where it gets ridiculously hot. I love WordPress and a lot of other open source software along with coding.

2 Comments on WordPress: Creating a Responsive Navigation Menu

  1. Hi Tj,
    Just have a small Q (despite it is not on the same topic), I came from a ‘FREE hosting background’, and I’m new here at Arvixe, I used to install wp using the auto installer and everything went right, but when i started here i found myself naming databases and other techy stuff! my Q is: Is there a way to do it the old way ,ie, auto install wp with fewer information to provide?
    Best regards.

Leave a Reply

Your email address will not be published. Required fields are marked *