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:
- 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.
- 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.
- In header.php look for a meta tag for devices. In twenty eleven it looks like this:
And change it to look like this:
- 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:
- Open your theme’s style css file and append the following CSS styles to the end of it:
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:
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:
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.