LearnCreate an Absolute Basic Mobile CSS Responsive Navigation Menu

Mat Helme
writes on February 20, 2013

Share with your friends


In this tutorial we will go over the process in coding a very basic CSS responsive navigation menu.  We will transform a basic non-list style navigation to a drop down menu using media queries in our stylesheet. There’s no need for javascript in this tutorial. We will walk through the build in this order HTML > CSS > Media Queries.




As for the HTML we will be using the HTML5 doctype as we will be using HTML5 tags.  Also we want to make sure we have our view port tags in there as well.  This is what the code will look like:

<!doctype html>

<html lang="en">


<meta charset="utf-8">

<title>Responsive Header Nav</title>

<meta name="description" content="Responsive Header Nav">

<meta name="author" content="Treehouse">

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

<link rel="stylesheet" href="css/styles.css">

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->




<a href="#" id="logo"></a>


<a href="#" id="menu-icon"></a>


<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>





<img src="img/featured.png" alt="Respond" />

<h1>Respond to Your Surroundings</h1>

<p>...Filler Text</p>

<p>...Filler Text</p>

<p>Filler Text</p>




CSS Code

For the CSS I’m going to run a compressed reset at the top. Below that, we will style the header to be positioned fixed at the top. The logo inside the header will float: left and the nav float: right. The rest is basic content styles for example purposes.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

body { 
	font-size: 1.05em;
	line-height: 1.25em;
	font-family: Helvetica Neue, Helvetica, Arial;
	background: #f9f9f9;
	color: #555;

a {

	color: #4C9CF1;
	text-decoration: none;
	font-weight: bold;


a:hover {

	color: #444;


img {

	width: 100%;


header {

	background: #fff;
	width: 100%;
	height: 76px;
	position: fixed;
	top: 0;
	left: 0;
	border-bottom: 4px solid #4C9CF1;
	z-index: 100;



	margin: 20px;
	float: left;
	width: 200px;
	height: 40px;
	background: url(../img/logo.png) no-repeat center;
	display: block;


nav {

	float: right;
	padding: 20px;	


#menu-icon {

	display: hidden;
	width: 40px;
	height: 40px;
	background: #4C8FEC url(../img/menu-icon.png) center;


a:hover#menu-icon {

	background-color: #444;
	border-radius: 4px 4px 0 0;


ul {

	list-style: none;


li {

	display: inline-block;
	float: left;
	padding: 10px


.current {

	color: #2262AD;


section {

	margin: 80px auto 40px;
	max-width: 980px;
	position: relative;
	padding: 20px


h1 {

	font-size: 2em;
	color: #2262AD;
	line-height: 1.15em;
	margin: 20px 0 ;


p {

	line-height: 1.45em;
	margin-bottom: 20px;


Adding Our Media Queries

Now it’s time for the Media Queries. For this basic example, I’m only going to layout the nav to respond to 640px or lower. The idea here is to have the nav menu disappear and the menu-icon appear in its place. Then once the menu-icon is selected or hovered, the nav menu will reappear below the menu-icon in a list order. Also we want to position the header absolute as we might need to scroll the navigation options. Here is our code:

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

	header {

		position: absolute;


	#menu-icon {



	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background: #fff;
		border: 5px solid #444;
		right: 20px;
		top: 60px;
		width: 50%;
		border-radius: 4px 0 4px 4px;


	nav li {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;


	nav:hover ul {

		display: block;



This example is very basic and allows you to understand the process of building a responsive navigation. If you wish to have a more robust navigation menu you might want to go a different route. Perhaps the menu slides in from the left and push the page right off the screen like the Future Insights Live site. Or maybe have the nav appear above the page like this blog. It’s truly amazing what you can do with CSS Media Queries. Play around with the code and see what you can come up with.

19 Responses to “Create an Absolute Basic Mobile CSS Responsive Navigation Menu”

  1. Thanks for the tutorial. The one problem is that doesn’t work if below the menu have, for example, a image with a link. When click in a link in the menu, he always go to link for the image below. Anybody knows how to fix this?

  2. Hi! Is it an easy fix adding an fade in, ease-in-out on the menu?

  3. Reliance on :hover means this won’t work on mobile as soon as you replace the dummy anchor links with proper links. Don’t waste your time trying to implement this and stick to a tried and test javascript solution/psuedo-element solution (see Twitter Bootstrap etc.). Nice clean design though.

  4. Here’s a responsive nav I created a while ago that has drop-downs. Its on Github so feel free to have a play.

  5. Mike Greenwell on April 3, 2013 at 11:15 am said:

    Wouldn’t the CSS for “#menu-icon” be “display: none;” or “visibility: hidden;”?

  6. Hi! everybody,

    The menu (e.g.: a ) & menu items should adapt and change their look depending on the screen size of the browser.

    The reason why I want that is because the menu items will be squeezed together, when the user navigates on your webpage.

    umre http://bit.ly/14Rec2v

  7. Akhil Gupta on April 12, 2013 at 6:47 am said:

    great article and wrote in the way to grab every detail easily. Thanks @twitter-408154147:disqus

  8. how can this be used in a mobile device if there are hovers?

  9. Richard Migambi on April 21, 2013 at 9:13 am said:

    great post

  10. Irving on May 7, 2013 at 10:26 am said:

    when i publish the a site with this menu the links dont work on mobile only on desktop. Any solutions??

  11. wonderful, exactly what I was looking for, many thanks

  12. sadman on May 18, 2013 at 4:51 pm said:

    Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.


    have a nice day

  13. I think you mean visibility: hidden; or display:none; here:

    #menu-icon {
    display: hidden;

  14. ToniOne on August 6, 2013 at 7:12 am said:

    Great Tutorial!
    I was always wondering how to make a mobile navigation like this. One question though, is it ok to use this code as a basis for a website I’m building? I know it’s rather basic stuff but i thought I’d better ask before using it.

  15. Would it be possible to use some jquery to change the state?

  16. chidiebere on August 12, 2015 at 8:35 am said:

    nice tutorial…thanks a lot.

  17. スーパーコピーブランド弊社は安心と信頼のスーパーコピーブランド (N級品)専門店です!全国送料無料!日本一流品質のスーパーコピー時計、ブランド財布コピー、ブランドバッグコピー新作最新入荷!ロレックススーパーコピー,ウブロ スーパーコピー,ブランド時計 コピー,ブランド スーパーコピー,コピーブランド 通販,スーパーコピー 財布その他の世界一流ブランドコピーを取り扱っています。商品は全て最高な材料と優れた技術で造られて、正規と比べて、品質が無差別です!人気時計コピー、N級ブランドコピーのお求めはぜひ当店へ。弊社は正規品と同等品質のブランドコピー品を低価でお客様に提供します
    [url=http://www.bestevance.com/Hermes-1/index.htm]ブランド激安市場コピーブランドコピー,スーパーレプリカ,ブランド激安市場 女社長 激安 シャネル 財布(CHANEL),グッチ 財布 (GUCCI) 激安,ヴィトン(lv) 新作 財布 激安 ルイヴィトン財布コピー,新作 ブランブランドを特別価格で提供中!ルイヴィトン財布、ルイヴィトンバッグ、ルイヴィトンベルトブランド激安市場ブランドコピー,大人気のルイヴィトン,スーパーコピー,様々な高品質ーパーコピー時計,ブルイヴィトン コピー ブランドレプリカ 激安 ブランド激安市場 ロレックス コピー スーパーコピー ルイヴィトン、シャネル、グッチ、エルメス、クロエ、ブラダ、ブルガリ ドルチェ&ガッバ―ナ、バレンシアガ、ボッテガ.ヴェネタ偽物ロレックス、ブルガリ、フランク ミュラー、シャネル、カルティエ、オメガ、IWC、ルイヴィトン、オーデマ ピゲ、ブライトリング、[/url]

  18. 2015ブランド財布コピールイヴィトン財布コピー,シャネル財布コピー,グッチ財布コピー,エルメス財布コピークロエ財布コピー,ブラダ財布コピー,ブルガリ財布コピー,ドルチェ&ガッバ―ナ財布コピーバレンシアガ財布コピー,ボッテガ.ヴェネタ財布コピーロレックス時計コピー,ブルガリ時計コピー,フランク ミュラー時計コピーシャネル時計コピー,カルティエ時計コピー_オメガ時計コピー,IWC時計コピールイヴィトン時計コピー,オーデマ ピゲ時計コピー,ブライトリング時計コピーコピーブランド、ブランド激安、人気ブランドの販売、通販、オークション、新作のスーパーコピーブランドコピー、韓国スーパーコピー、ブランド激安、偽物ブランド、ブランドバッグ、激安かばん、ルイヴィトン偽物、財布激安.商品は全く写真の通りです。
    [url=http://www.ooobrand.com/bags/chanel/index.html]スーパーコピー腕時計,ロレックスコピー,ブライトリングコピー,ボーム&メルシエコピー時計コピー業界最高峰スーパーコピー時計通販専門!7年以上の販売実績を 持つ時計コピー老舗!時計コピーであれば何でも揃えられます コピー時計 時計スーパーコピー通販専門店!時計コピー時計販売通販! コピー時計スーパー コピー等の 最高級のレプリカコピー時計を販売ロレックスコピー,ガガミラノコピー ,IWCコピー ,オメガコピー ,フェラーリコピー ,フランクミュラーコピー ,ベル&ロスコピー ,各種のブランドはコピーを表しますコピーを表して、時計をコピーして、スーパーコピーは代 金引換払いにして、スーパーはブランドをコピーして、スー パーは時計をコピーして代金引換払いにして、スーパーは時 計をコピーして、スーパーは腕時計をコピーして、ブランド はスーパーマーケットを表してコピーして、ブランドのスー パーマーケットはコピーして、ブランドはコピーを表して、 腕時計はコピーします[/url]

Leave a Reply

Want to learn more about CSS?

Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.

Learn more