Responsive Web Design Navigation Menu Tutorial

Learn how to create a responsive navigation menu. Mobiles will initially hide the navigation until a button is tapped. Check out my “Get a Developer Job” course:

Link to demo / source page:

For an overall introduction to JavaScript you can watch:

For an overall introduction to Responsive Web Design you can watch:

Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around!

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:






22 responses to “Responsive Web Design Navigation Menu Tutorial”

  1. Muhammad Irfan Avatar

    As always Helpful….. Crystal Clear. Thanks

  2. David Castro Avatar

    Can i see your CSS? I am definitely missing something.
    After I click only the span dissapears.

  3. Ike Avatar

    There are a million videos about creating the nav bar but none that include the most important step of making the damn thing work (ex: click on page 2 on nav bar, page 2 is then displayed). Just kill me.

  4. loco13 Avatar

    hey wuz up man first thanks for the tutorial big help now i have a problem the menu works perfect with google crome but not with explorer can u plz help

  5. Bri Iunno Avatar

    You are the best!


    You still had syntax error after width still posting ??? You gotta improve a lot man

  7. Roland doda Avatar

    did you have new advanced jquery tutorials?Great tutorial

  8. William Wang Avatar

    HI Any chance i can download ur project for learning purpose, if yes do u mind send me ur project download link please. thanks William

  9. falgun swami Avatar

    Hey! I am unable to see the toggled list items. They have gone invisible

  10. Kinarmi Avatar

    It worked! Thank you so much for the tutorials. They are a huge help to an aspiring front-end developer, you sir earned a sub!
    To those whom are having problems, click the link to demo / source page in the description. On that page view the links contents of "Direct link to JS" and "Direct link to CSS" and compare them to what you have.

  11. Martin cool Avatar

    Really good well explained video

  12. lakShmi thirumeni Avatar

    Excellent tutorial. neat and clean….thank you sir and thank you jimmy luo for your tips to include js file.

  13. mbambo lucas Avatar

    Nice tutorial
    But im stuck with this line jQuery(this).toggleClass("nav-expanded").css('display', '');
    When i click on the MENU the nav-menu just it appear for one second then disappear

  14. Ratnadeep Debnath Avatar

    Hi, I couldn't understand the nav expanded thing on click jquery

  15. Scarlet Fire Avatar

    Thank you! It worked for me!

  16. rukkumani n Avatar

    can u say how to open or load all the links in same section of a page

  17. Fuqing Wang Avatar

    For whoever has problems with the .css('display','') notation, here is a very comprehensive explanation.

  18. azzywazzy768 Avatar

    Everything works fine on desktop. Tapping on the menu button on mobile phone doesn't work. Anyone else had this problem?

Leave a Reply

Your email address will not be published. Required fields are marked *