Yo ninjas, in this responsive design tutorial, I’m gonna show you how to make a simple but effective drop-down mobile navigation using just CSS and a little jQuery.

jQuery –


========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – or

========== Social Links ==========

Twitter – @TheNetNinja –


  1. In the jquery function I had to add preventDefault() to make it work. So it now looks like:
    $(document).ready(function() {
    $(".burger-nav").on("click", function(e){
    $("header nav ul").toggleClass("open");

    Hope that helps someone.

  2. Great video, comfortable making this now. Question, how do I make this slide down and up? I was trying to use slideToggle, but I'm not sure how to get it to work for this method.

  3. It worked perfectly on the homepage but the nav bar wouldn't pop up whenever I went to other pages. I did add the same header section to all my other web pages, but I would still get the problem. It just wont pop up in other pages

  4. The Net Ninja, I enjoy your tutorial very much. I need a tutorial for a convert hover drop-down menu to mobile responsive dropdown menu. I will be very happy if you have any links for that types of tutorial

  5. Great tutorial, thanks.

    The question is: I want to add a transition to the drop down menu; How can I do it? I've been messing with the CSS with no success so far. Thanks again.

  6. Great tutorial! Only one problem… after the menu is expanded and I choose something to navigate to the menu doesn't close and take me to the desired ID, as the ID in some screen widths are behind the content… any solutions?


Please enter your comment!
Please enter your name here