WordPress Responsive Drop Down Menu Tutorial

Today I will be walking you through how to create a custom drop down menu in WordPress. We will be using the WordPress menu system to control the structure of the menu and then applying our own custom styles to the WordPress theme.

The menu I will be explaining is fully responsive and works with touch devices, so there is a little bit of jQuery code needed to make sure everything is cross browser compatible.

Demo

Here is what our menu is going to look like when we are finished. Resize the screen to see what the responsive version looks like.

View Demo

Requirements

  • Ability to edit your theme’s functions.php file
  • Ability to upload files to your theme’s directory.
  • Basic understanding of CSS and PHP

Create a Menu in WordPress

Before we can start styling our menu, we need to first create the HTLM structure using the WordPress menu system. You probably already have a menu built in WordPress, but if you don’t head over to Appearance > Menus and create one. WordPress provides a easy to use interface to allows you to drag and drop menu items into a hierarchy. When you are done creating your menu structure, give the menu a name and then save it.

Wordpress Menu System

A Custom Walker Class

Before adding our CSS and jQuery to the menu, we first need to make sure that the HTML being outputted for the menu is nice and clean. I’ve created a custom WordPress Walker Class that does just that. The WordPress Walker Class takes the structure of your menu and then prints out the corresponding HTML. The Walker class below makes sure we have nice, clean HTML to work with and that our menu items have the correct CSS classes assigned to them.

To use this Walker class, simply copy and paste it to the bottom of your theme’s functions.php file. If you don’t see a functions.php file, then create one and paste the code in.

Print the Menu

Now we need to print out our menu using the wp_nav_menu() function. Where ever you place this next bit of code is where you menu will be printed out. I’m using one of the default themes so I’m printing my menu in the header.php file. This will be different for you though depending on where you want your menu to show up.

Using PHP we will pass this function the parameters of our menu so that it can print out the HTML structure. The ‘menu’ parameter is the name of the menu you created in WordPress. The ‘container_id’ will add an ID to the menu’s containing DIV. The ‘Walker’ parameter is telling the wp_nav_menu() function to use our custom WordPress walker class to print the HTML.

Once you have placed this code in your theme’s template file, save the file and then refresh your site in the browsers. We have not added any styles or jQuery so you should see a plain HTML list being printed out like the one below.

wordpress_2

The CSS

Now we need to add the CSS styles to our menu so open up your themes CSS file. It might be in a folder called css/styles.css or just a file in the root directory of the theme. I’ll break up the CSS to explain it a little bit, but you can also skip ahead and just copy and paste all the code in at one time.

Notice that we are using CSS ID that we specified in the wp_nav_menu() function, #cssmenu.

This first bit of CSS takes care of the browser resets so that everything is uniform. We are also using the free Google Font PT Sans that we are importing at the top of our file.

This next chunk of CSS will take care of the majority of our menu’s styles. I wont go over it all in detail, feel free to ask questions in the comments about any part that you don’t understand.

If everything has been done correctly, your should have a completely functioning drop down menu. If your menu doesn’t look like the image below, go back and double check your CSS styles.

Wordpress Drop Down Menu

Now that we have your basic menu styles in place we need to create the CSS styles that will take effect for mobile devices. This is the responsive part of the tutorial. We will be using Media Queries to specify which styles kick in and at what screen width.

We wont be able to see our responsive styles until we add a little bit of jQuery. So lets do that first before checking our menu.

Minimal jQuery

Next we will need to add the small amount of jQuery below to one of our themes script files. Almost all WordPress themes use jQuery these days so just find the file called script.js or possibly functions.js and paste the code in. Notice we are using the #cssmenu ID again to target our menu.

Test it Out

Save all your files and go back to your browser. To test the responsive styles, resize your browser window to less than 800px. Your menu should look like the image below:

wordpress_4

That’s it! If everything was done correctly you should have a functioning WordPress responsive drop down menu.

Troubleshooting

If your menu doesn’t seem to be function correctly, or it looks a little off then it is possible you are experiencing residual styling from your WordPress theme. This means that there are other CSS styles in your theme that are conflicting with our menu styles. The only way to fix this problem is to track down the other CSS styles and remove them. Your best bet is to use the Firebug extension for Firefox and inspect the CSS styles manually. Once you find the conflicting styles remove or delete them.


About The Author: Russell Taylor

Russell Taylor is professional web developer and entrepreneur based out of California with over 8 years experience in the industry. His latest project is CSS MenuMaker which provides free drop down menus to web developers and a Wordpress Responsive Menu Plugin for the Wordpress community.