Creating a Responsive Navigation Menu in WordPress

in WordPress Tutorials

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:

    And change it to look like this:

  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:
  5. Open your theme’s style css file and append the following CSS styles to the end of it:
    nav select
  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

    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:


    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.


    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.

Comments (3)

  • Comment by Cheenu Lott
    Cheenu Lott

    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.

  • Comment by Cheenu Lott
    Cheenu Lott

    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.

  • Comment by Sudip basu ray
    Sudip basu ray

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

    get_sidebar( 'content' );