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.

29 responses to “WordPress Responsive Drop Down Menu Tutorial”

  1. Great and a very useful blog for me. Thanks a lot for sharing the blog.

  2. Mehran says:

    how to upload files in theme directory please help me

  3. George says:

    Parse error: syntax error, unexpected ‘;’ in C:\wamp\www\tree-time.com\wp-content\themes\hillside\functions.php on line 455

    Fucking load of shite! Cheers

  4. Gen says:

    This is fab thanks! Had a problem with the code for functions.php containing an extra ;

    var $db_fields = array( ‘parent’ =>; ‘menu_item_parent’, ‘id’ => ‘db_id’ );

    should be

    var $db_fields = array( ‘parent’ => ‘menu_item_parent’, ‘id’ => ‘db_id’ );

  5. olivier says:

    hello,

    I used your technique for twenty eleven theme

    it works but I had to add in the header:

    and

    <script src = " / js / script.js” type = “text / javascript”>

    but I do not have the menu icon (3 lines) but I have de icons arrows, where come these images (apparently no css) ?

    thank you

  6. Thanks for tutorial !!!

  7. sanju says:

    Its not working.. doesnt show mobile menu… changed them css.. still not working

  8. Magda says:

    Thank you so much for this and for the corrections above. I am almost there I created a 3 line image, but not sure where to place in the css. I have a feeling I should place the image in the @media suggestions?

  9. Magda says:

    My menu disappears when I go to mobile is this because I do not have an image?

  10. Magda says:

    I am working on a localhost and the menu works great on full size, but it disappears when it goes to mobile.
    I have placed the script.js in it’s own file and added to the header.php like so:

    <script type="text/javascript" src="js/script.js”>

    and I have also tried to (deleting the upper script) placed in the header.php file the script itself in between . I can’t get this menu to show up in the mobile size it just disappears. Can anyone help me with this? I really like this menu.

  11. Kira says:

    Very useful tutorial!I have already my own culinary website based upon http://www.templatemonster.com/wordpress-themes.php . I will definitely take into account this tutorial when I decide to build one more website;)

  12. Alex Carby says:

    Cheers, great walker class, I hate the output for wordpress menus, why they over complicate the hell out of it, only lord knows….

    thanks again.

  13. Thanks for sharing such a great post regarding Responsive Web Design.

  14. Tom Stark says:

    Hi there,
    for those who have troubles with the missing “mobile” menu!
    First: check that the jQuery is loading in den header:

    Second: change the jQuery-code in your js-file to:
    ( function( $ ) {

    $( document ).ready(function() {
    $(‘#cssmenu’).prepend(‘Menu’);
    $(‘#cssmenu #menu-button’).on(‘click’, function(){
    var menu = $(this).next(‘ul’);
    if (menu.hasClass(‘open’)) {
    menu.removeClass(‘open’);
    } else {
    menu.addClass(‘open’);
    }
    });
    });

    } )( jQuery );

    I found all of this on the demo page code…
    Maybe you have to ajust the css for the “3-line-menu-button”.

    Good coding,
    Tom

    PS: Thanks for this tutorial!!!

  15. Mahsa says:

    very very tnx
    is very useful tutorial :)

  16. Scott says:

    Got it working but the walker class is not working properly it’s not possible to set a menu for it, it seems to use whatever menu was created first regardless of what is set for it to use.

  17. Great tutorial. Frankly speaking, I don’t know CSS much. But You’re easy to guide tutorial made it simple. I didn’t want to change my Theme but at the time I also wanted to get responsive menu. Thanks Russell

  18. Diwali.com says:

    Great tutorial. Frankly speaking, I don’t know CSS much. But You’re easy to guide tutorial made it simple. I didn’t want to change my Theme but at the time I also wanted to get responsive menu. Thanks Russell

  19. Flaggen says:

    Thanks for tutorial !!!

  20. Respostas says:

    I’m use plugin WP-Mega Menu.

  21. Samuel says:

    Great! thanks for the help! :) Works fine just edit this;

    ( function( $ ) {

    $( document ).ready(function() {
    $(‘#cssmenu’).prepend(‘Menu’);
    $(‘#cssmenu #menu-button’).on(‘click’, function() {
    var menu = $(this).next(‘ul’);
    if (menu.hasClass(‘open’)) {
    menu.removeClass(‘open’);
    } else {
    menu.addClass(‘open’);
    }
    });
    });

    })( jQuery );

    And edit this in functions.php

    this is the correct line:
    var $db_fields = array( ‘parent’ => ‘menu_item_parent’, ‘id’ => ‘db_id’ );

    This is the incorrect line in this tutorial as mentioned before in comments.:
    var $db_fields = array( ‘parent’ =>; ‘menu_item_parent’, ‘id’ => ‘db_id’ );

    took me 30 min to fix all this and I’m a beginner.

    Take care! And thanks again for learning me how to make a menu! :)

  22. Colorfxweb says:

    Great article. Thank for your informative instructions.

  23. Rachael Portier says:

    I have tried everything and the mobile menu just disappears every time the browser is resized! Someone please help!

  24. Guia Compras says:

    Thanks for tutorial !!!

  25. It’s very useful for me .Thanks

  26. Stark Edge says:

    Appreciating the time and energy you put into this post and detailed information you offer.

  27. Johan says:

    First great tutorial. I’m new to this and like the menu. I got the menu working. But still the mobile menu isn’t visible.

    To load the javascript in the header I added this line in my header.

    And added the next script into a js file named script in the folder js. The next script however give a syntaxerror on line 4

    ( function( $ ) {

    $( document ).ready(function() {
    $(‘#cssmenu’).prepend(‘Menu’);
    $(‘#cssmenu #menu-button’).on(‘click’, function() {
    var menu = $(this).next(‘ul’);
    if (menu.hasClass(‘open’)) {
    menu.removeClass(‘open’);
    } else {
    menu.addClass(‘open’);
    }
    });
    });

    })( jQuery );

    I got a good working menu on the desktop but the mobile menu won’t show up. What I;m doing wrong ?

    Thanks

  28. Really good post.Thanks just for penning this informative posting plus enlightening all of us with your views.I’m hoping you will keep on this great work in future also.

  29. thanks dear ,very usefull for me , amazing css menu

Leave a Reply