Responsive Mobile Navigation Menu Tutorial HTML5 & CSS3

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 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 tag, then the list 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.


@import 'https://fonts.googleapis.com/css?family=Open+Sans';
header {
	background: #F62459;
	width: 100%;
	height: 76px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	border-bottom: 5px solid #F62459;
}
ul {
	list-style: none;
}
li {
	display: inline-block;
	float: left;
	padding: 10px
}
a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	text-decoration: underline;
}
#logo {
	margin: 20px;
	float: left;
	width: 200px;
	height: 50px;
	background: url(images/logo.svg) no-repeat center;
	display: block;
}
nav {
	float: right;
	padding: 20px;
	font-family: 'Open Sans', sans-serif;
}
#menu-icon {
	background: url(images/menu-icon.png) no-repeat center;
	display: hidden;
	width: 32px;
	height: 32px;
}

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. 


@media only screen and (max-width: 640px) {
	header {
		position: absolute;
	}
	#menu-icon {
		display: inline-block;
	}
	nav ul, nav:active ul {
		display: none;
		position: absolute;
		padding: 20px;
		background: #c5c5c5;
		right: 10px;
		top: 65px;
		width: 35%;
	}
	nav:hover ul {
		display: block;
	}
	nav li {
		text-align: center;
		width: 100%;
		padding: 15px 0;
		margin: 0;
	}
}

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!

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!