Responsive Mobile Navigation Menu Tutorial HTML5 & CSS3

In this weeks tutorial, I’ll be showing you how to create a really simple responsive navigation menu with HTML5 & CSS3. We’ll also be using media queries to help make the menu responsive so it can be used on any mobile device.

Source Files

The HTML

First, we’re going to write the HTML. This code is going to be very simple. First, we’re going to use the <header> tag. Within the header tag we’re going to put the website logo and then the menu. To place the websites logo, we’re going to use the anchor <a> tag and then give the anchor tag an id called “logo”. To add the menu, we’re first going to use the <nav> tag. Within the nav tag, we’re first going to add the menu’s “hamburger” icon. This “hamburger menu icon” is very common. You’ve probably seen it on most websites and app menus on your mobile device. We’re going to use the anchor tag and then give the tag an id called “menu-icon”.

Now, we’re going to use the unordered list <ul> tag, then the list <li> tag and then the anchor tag to create the individual menu links. We’re going to use the hashtag as a placeholder for all of the links. We’re going to name the first link “home”, the second link “about”, the third link “work” and the fourth link “contact”. That’s all the HTML we’ll be writing for this responsive menu. Now, we’re going to move on to writing the CSS and media queries for the menu so that we can make it look pretty and responsive. Take a look at the code below:

The CSS

The CSS is the fun part. This is where we turn the basic looking list into an interactive responsive menu. First, we’re going to import the font Open Sans from Google Fonts. If you don’t know how to use Google Fonts, read this quick tutorial on how to use it.

To style the header (the section that contains the menu), we’re going to color the background and set its width to 100% so that it automatically adjusts to the width of the browser. We’re going to set the property “top” and “left” to zero so that there’s no white space in the browser. The z-index property specifies the stack order of the element—in this case, it’s always going to be in front of any element below 100 (this includes elements that have no z-index declared).

Next, we’re going to style the unordered list by removing any list bullets and then applying some basic styles. We’re also going to style the anchor links by changing the link color to white, removing the underline and making the text bold. Lastly, we’re also going to add an underline to the link when it’s hovered over.

The “logo” is going to float to the left of the header. That’s why we’re using the float: left property. We’re also going to give it a width and height. We need to place the logo using the background property and include no-repeat and center.

The “nav” is going to float to the right of the header. We’ll also give it some padding and change the font family to use the Google Font that we imported called “Open Sans”. We’ll style the menu icon–which will only be seen when viewed on a browser that’s 640px or less (a common browser size for many mobile devices). For now, we’re going to hide it on browsers 640px or larger by using the display: hidden property.

Media Queries

Media Queries allows elements on websites to be viewed on mobile devices. In this tutorial, we’re going to write a media query to make this menu responsive. First, we’re going to declare it using the max-width property and set it to 640px. This means that any browsers 640px or smaller will show the css styles that we write below.

We’re not going to change every element that makes up this menu, only the ones that we need to make responsive. As you type out the code below, you’ll see how each property changes the elements. Notice how the “#menu-icon” is now set to display: inline-block when before it was display: hidden? This reveals the famous “hamburger” icon (as it’s commonly referred to in the web design community) when the browser is at 640px or less. 

Changelog

  • Jan 2017
    • Menu ‘hamburger’ icon PNG (was SVG)
    • CSS code updates (read below)

Problem: drop down menu disappearing on hover

I’ve received quite a few inquiries about the dropdown menu disappearing after hovering the ‘hamburger’ menu icon. I’ve taken a look at the previous code and noticed several solutions in the CSS to fix this problem. It’s important to note that this menu relies on just the :hover pseudo class (which is applied to the ‘hamburger’ icon) to reveal the menu when the mouse is hovering over the icon. If the mouse is not hovering the icon area or the actual drop-down menu area, it will disappear.

Solution

  • Remove border-bottom: 5px solid #F62459;
  • Add margin:0  to  nav ul, nav:active ul
  • Change to right:0  in  nav ul, nav:active ul
  • Change to top:76px  in  nav ul, nav:active ul

I noticed that there was a gap between the icon and the responsive drop-down menu. The first two items (in list above) remove the gap. The last two items reposition the menu to fill the gap that was removed. Once you’ve updated your code with the fixes above, you’ll be able to hover over the menu and click on the menu links, without it disappearing in the process. Take a look at the GIF below to see it in action!
Responsive Mobile Navigation Menu HTML5 & CSS3 via xopixel.com

Show & Tell!

Feel free to share a screenshot of what you’ve made using this tutorial in the comments section below! Have any questions or comments? Let’s chat in the comment below!

Marisa Blair is a front-end web developer and graphic designer based in Toronto. When she's not writing for her blog xopixel.com, she's making design & tech videos for her YouTube channel.

19 Comments

  1. Marisa – how would you change the code and media queries so that the menu begins as a mobile first menu and then the hamburger menu icon is hidden when the screen/ viewport is larger than 640px so that you then have text links to the menu options?

  2. Hi There! I’m new to your site and I already like what I see. Just trying to get the responsive nav menu to work but i’m having some issues with it, when I hover over the “hamburger” the menu drops down but when I try to hover over the drop down menu it disappears! Is there anything you can do to help me out ? Thanks 🙂

  3. Hello excuse me ,about responsive menu i see that if the pointer is not on “hover ul” the block menu will disappear an i can’t reach li items ;its possible to solve that?Thanks

  4. Hello! I commented on your YouTube video for some help with my NAV. Ill post the code here, not sure if you will need images so I’ll try to include them, but the nave keeps overlapping each other. Thank you for your time Marisa!

    Catholic Women’s Conference

    Schedule
    Speakers
    FAQ
    Volunteer/Sponsor
    Register
    Testimonials

    A Spa Day For The Soul

    March 18th 2017 ~ Civic Center ~ Helena, MT

    CATHOLIC WOMENS CONFERENCE 2017

    CSS:
    Catholic Women’s Conference Schedule Speakers FAQ Volunteer/Sponsor Register Testimonials A Spa Day For The Soul March 18th 2017~Civic Center~Helena, MT CATHOLIC WOMENS CONFERENCE 2017

    font-family: ‘Prompt’, sans-serif;
    font-family: ‘Indie Flower’, cursive;
    html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    }

    body {
    background: url(images/newcwchome.png) no-repeat center center fixed;
    /*Change to images if working in file */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    h1 {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 1px 5px 1px 5px;
    }

    h2 {
    font-size: 55px;
    color: white;
    text-align: center;
    align-content: center;
    font-family: ‘Lobster’, sans-serif;
    height: auto;
    width: 100%;
    padding: 10px 10px 10px 10px;
    }

    h3 {
    font-size: 50px;
    color: white;
    text-align: center;
    align-content: center;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    font-family: ‘Raleway’, sans-serif;
    padding: 50px 5px 10px 5px;
    }

    nav {
    padding: 10px;
    max-width: 100%;
    height: auto;
    margin: auto;
    }

    nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }

    nav li {
    display: inline;
    margin: 0 25px;
    text-align: center;
    }

    nav a {
    color: white;
    font-size: 27px;
    text-decoration: none;
    font-weight: bold;
    font-family: ‘Raleway’, sans-serif;
    text-align: center;
    border: 1px solid;
    border-radius: 5px;
    padding: 3px;
    }

    nav a:hover {
    color: bisque;
    }

    .social ul {
    display: inline;
    margin: 0 -5px;
    }

    footer {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    font-family: ‘Intro’, ‘Permanent Marker’, cursive;
    clear: both;
    position: relative;
    color: white;
    margin-top: 20em;
    background-color: rgba(0, 0, 0, 0);
    /*0,0,0,0.3 for transparent black*/
    max-width: 100%;
    height: auto;
    -moz-border-radius: 10px;
    /* for Firefox */
    -webkit-border-radius: 10px;
    /* for Webkit-Browsers */
    border-radius: 10px;
    /* regular */
    }

Leave a Reply

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

More On XO PIXEL