June 15, 2014

Responsive Web Design Navigation Menu Tutorial

In this lesson we learn how to create a responsive navigation menu. For larger screens we use a traditional horizontal menu bar, but for smaller screens we initially hide the navigation until a “menu” button is tapped or clicked.

For an overall introduction to JavaScript you can view this tutorial.

For an overall introduction to Responsive Web Design you can view this tutorial.

Link to demo / source page

Direct link to CSS

Direct link to JS

If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my updated 8 hour video course and learn pro-level HTML, CSS, and responsive design.

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

13 thoughts on “Responsive Web Design Navigation Menu Tutorial

  1. Hello,

    This tutorial is great for me. But I’ve got a little issue.
    I did a class , $(this).toggleClass(“nav-expanded”).css(‘display’, ”);
    and I have added the class on css media querie, but when I am spreading for large screen the menu do not appear on the header.
    I did the css styles of media querie like you but different for the menu styles, I hope this makes sense.
    I’m looking forward to hearing from you soon.

    Thank you,
    Juli.

    1. Interesting – what you described should work. Is the class that initially hides the menu for mobiles inside a media query for small screens? Or, is the JS that you mentioned in the correct place (should be included as a callback once the slideToggle method is complete)? Perhaps you can paste your code into a JSFiddle.net instance and include a link here and I can look at the code.

  2. Hi.. So grateful for this tutorial 🙂 saved me a lot of stress and time . Thankyou .

    I have tried to merge the Responsive Nav Tutorial with the Responsive Web Design Tutorial and Explanation . Everything works as it should other than i cant get the menu toggle button to bring the menu out on small screen . the Page i am trying it on is http://www.lifethemc.com/homepage1.html. I would really appreciate if anyone could have a quick look and see if they can see where ive gone wrong . Bit of a head scratcher atm lol Thanks again for the great work.

  3. Hi Brad,

    Thanks alot for the Tut! But just like mjuli, I am also having issues with the navigation not displaying when the screen is stretched to its full width. I am using the $(this).toggleClass(“nav-expanded”).css(‘display’,”); code as well. If you could assist me with that issue, that would be awesome!

    Thanks!

  4. Hi Brad,
    Thanks for the great tutorial, you are the reason i made my first navigation menu hehe. Following your code the only difference i made was to make the menu bar below the navigation, so when it is clicked it scrolls down when the menu appears. The only problem is that the menu hides back again as soon as it expands.

    .menu-trigger{
    background-color: #39414c;
    height: 40px;
    width: 100%;
    display:none;
    color:#fff;
    padding:10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    clear:both;
    font-size:18px;
    font-family: ‘PT Sans Narrow’, sans-serif;}
    .menu-trigger span{ font-size:12px; }
    .menu-trigger i{
    font-size:18px;
    float:right;
    }
    and the responsive css:
    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    .menu-trigger{display:block;}
    #nav {display:none; }
    .nav-expanded{display:block;}
    }

    any help would be very much appreciated. thanks.

    1. Hi Imran, I forgot to leave my last comment as a “reply” to your message so I’m leaving this message just to alert you that you might be able to find the solution in my other comment 🙂

  5. Hi Imran,

    Your issue is a result of ID selectors taking precedence over class selectors. Towards the end of the code that you included is the “.nav-expanded” class that sets the content to display block – a class cannot override an ID rule in this fashion, so the content resets back to display none as soon as the jQuery animation completes. Is it possible that you can give the #nav element an additional class and then reference that new class instead of “#nav” when you are defining “display: none;”

    Cheers!
    Brad

    1. Thanks a million i will try that right now. hopefully it will workout. I would like to purchase any training series you have on javascript or jquery. I think your method of explaining is better than most in the market. besta luck and thanks again.

      Imran

  6. Hi

    I had the same problem as Imran. I changed mine to a class selector, but still have the same problem. The menu hides back again as soon as it expands. Is there anything else that should be looked into.

    Thanks for a very clear explanation on navigation menu. I was really going nowhere till i chanced upon your site.

    Thanks

    This is my code

    div.nav-menu {

    background-color: #76A870;
    float: left;
    width: 794px;
    font-size: 9pt;
    margin-right: 2px;
    margin-left: 2px;
    }

    div.nav-menu ul {

    background-color: #76A870;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index:1000;

    }

    div.nav-menu li {
    float: left;
    position: relative;
    padding-right: 0px;
    display: block;
    border: 2px solid #E6E6E6;
    border-style: outset;
    width: 84px;
    }

    div.nav-menu ul a {

    display: block;
    width: 89px;
    height: 20px;
    line-height: 20px;
    }

    div.nav-menu li ul {
    display: none;
    position: absolute;

    }
    div.nav-menu li:hover ul {
    display: block;
    background-color: #76A870;
    height: auto;
    width: 12em;

    }

    div.nav-menu li ul li a {

    width: 11em;

    }

    div.nav-menu li a:hover {

    background-color: #BEEE96;
    }

    div.nav-menu ul li:hover {

    display: block;
    background-color: #BEEE96;

    }

    div.nav-menu li ul li{
    clear: both;
    border-style: none;
    }

    div.nav-menu ul a:link {
    color: #000000;
    text-decoration: none;
    text-align: center;

    }

    div.nav-menu li ul li a:link{
    text-align: left;
    padding: 2px;
    }

    div.nav-menu a:visited{

    color: #red;
    text-decoration: none;

    }

    .menu-trigger {
    display: none;
    }

    @media screen and (max-width: 480px) {

    .menu-trigger {
    display: block;
    color: #76A870;

    }

    .nav-menu {

    display: none;
    }

    .navexpanded {

    display: block;

    }
    .nav-menu ul li{
    float: none;
    }
    .nav-menu ul li:last-child {
    border-bottom: none;
    }

    }

    1. Hi Kay, I see you are using a class named “navexpanded” without a hyphen. Did you make sure to use that exact same name in your accompanying JavaScript that adds and removes the class at the appropriate times?

  7. Hi Brad,
    Thanks. yes, I had not put the hyphen, which I didn’t notice at that time. But I did add “content “in the jQuery and it worked.
    (‘display’, ‘content’);

    Thanks so much again. Your tutorial was the only one I understood.

  8. Hi Brad,
    I have the same problem as Kay, I’m using the same name in my css and js. when I click on menu it show for a short time and goes away.
    Regards

    JAVASCRIPT
    jQuery(document).ready(function(){
    jQuery(“.MenuTrigger”).click(function() {
    jQuery(“#NavBar”).slideToggle(400, function(){
    jQuery(this).toggleClass(“Nav-Expanded”).css(‘display’,”);
    });
    });
    });

    CSS

    @media screen and (max-width: 770px) {

    /*Navigation li*/
    #NavBar ul li{
    float:none;
    border-bottom:2px red solid;}

    /*Navigation li last li*/
    #NavBar ul li:last-child{
    float:none;}

    /*header logo*/
    #Logo{
    display:none;
    }

    /*(trigger for mobile menu*/
    .MenuTrigger{
    display:block;
    color:white;
    font-size:20px;
    cursor:pointer;
    }

    /*no display for NavBar*/
    #NavBar{display:none;}

    /*display NavBar on larger media*/
    .Nav-Expanded{
    display:block;
    }

    }

    1. Hi Zac, it looks like your issue is caused by the rule that hides the navBar using an ID selector which has a higher specificity than the class that makes it visible. So the class that hides it will always overrule the class that un-hides it. To fix this, instead of using the “#NavBar” selector to hide the element, can you give that element a unique class name instead? And then use that class as your selector to hide (display: none;”).

Leave a Reply

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