Home
Tools
Workshops
Technologies
Pricing
Contact Us



How to create a responsive navbar with css and js
Brief Introduction
A responsive top navigation bar can be a game changer when it comes to User Experience or UX of your web-app. If the navbar is not responsive it really hurts the UX of the app and users may easily get frustrated and leave your page then and there. In this tutorial, we'll learn how to create a responsive navbar using html5, css3 and javascript. We'll also learn to make it look awesome by adding css3 classes.

A responsive navbar can be a game changer from UX point of view.

A basic Navbar
A basic navbar is nothing but a collection of links to the important areas of a web-site. In order to create a simple Navbar we can use html and css as shown below.


<ul class="res-nav" id="resNav">
			<li>	
				<a href="#"> Home </a>
			</li>
			<li>	
				<a href="#"> Tools </a>
			</li>
			<li>	
				<a href="#"> Workshops </a>
			</li>
			<li>	
				<a href="#"> Technologies </a>
			</li>
			<li>	
				<a href="#"> Pricing </a>
			</li>
			<li style="float: right; background: #ce933c">	
				<a href="#"> Contact Us </a>
			</li>
			<li class="icon">
				<a href="#" onclick="respond()">&#9776; </a> 
			</li>
		</ul>

You also need to add the following css code. You can either add this code inside of style tags of your page or the other alternative is to create an external css file, add the following code to it and refer it from your html page.


	body {
		margin: 0px;
	}
	
	ul {
		list-style-type: none;
		width: 100%;
		background: #7f3a18;
		padding: 0px 0px;
		overflow: hidden;
		margin: 0;
	}
	
	li {
		float: left;
		text-align: center;
	}
	
	li a{
		display: block;
		color: white;
		text-align: center;
		padding: 34px 30px;
		text-decoration: none;
		font-size: 24px;
	}
	
	li a:hover {
		color: #7f3a18;
		background: #ce933c;
	}
	
	li.icon {
		display: none;
	}

Add CSS Media Queries
Media Queries is a feature introduced in CSS-3 which helps to manipulate css based on certain conditions like:
    "if the media screen width is less than 900px" or
    "if media screen orientation is landscape" etc.
Following is a simple example of CSS Media Query which changes the body background when media width is less than "800px"


	@media only screen and (max-width: 800px) {
    body {
			background: #456892;
		}
	}

Media Queries for Responsive Menu
Now let's add CSS Media Queries in order to make our navbar responsive to situations like small screen sizes.


	@media screen and (max-width: 900px) {
		li:not(:first-child) {
			display: none;
		}
	
		li.icon {
			float: right;
			display: inline-block;
		}
	}

	
	@media screen and (max-width: 900px){
		ul.responsive {
			position: relative;
		}
		ul.responsive li.icon {
			position: absolute;
			right: 0;
			top: 0;
		}
		ul.responsive li {
			float: none;
			display: inline;
		}
		ul.responsive li a {
			display: block;
			text-align: left;
		}
}
In the above media queries, we've added a BREAKPOINT at width:900px; which means whenever the media screen width is less than 900 px, our queries will run and manipulate the css to display a menu icon along with home page link rather than showing all the links. Now in the next section we'll add javascript which allows to toggle other menu links as soon as the user clicks on the menu bar.
JS to respond to button clicks


	function respond() {
    var elem = document.getElementById("resNav");
    if (elem.className === "res-nav") {
        elem.className += " responsive";
    } 
	else {
			elem.className = "res-nav";
		}
	}

Complete Recipe for Responsive Navbar
Following is the Code for Responsive Navbar for you to play around with.

	<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>

body {
	margin: 0px;
}
@media only screen and (max-width: 800px) {
    body {
        background: #456892;
    }
}


ul {
	list-style-type: none;
	width: 100%;
	background: #7f3a18;
	padding: 0px 0px;
	overflow: hidden;
	margin: 0;
}
li {
	float: left;
	text-align: center;
}
li a{
 display: block;
    color: white;
    text-align: center;
    padding: 34px 30px;
    text-decoration: none;
	font-size: 24px;

}
li a:hover {
	color: #7f3a18;
	background: #ce933c;
}
li.icon {
	display: none;
}
/* add media queries */
@media screen and (max-width: 900px) {
	li:not(:first-child) {
		display: none;
	}
	li.icon {
		float: right;
		display: inline-block;
	}
}

@media screen and (max-width: 900px){
	ul.responsive {
		position: relative;
	}
	ul.responsive li.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	ul.responsive li {
		float: none;
		display: inline;
	}
	ul.responsive li a {
		display: block;
		text-align: left;
	}
}
 
</style>
<script>
function respond() {
    var x = document.getElementById("resNav");
    if (x.className === "res-nav") {
        x.className += " responsive";
    } else {
        x.className = "res-nav";
    }
}
</script>
</head>
<body>
		<ul class="res-nav" id="resNav">
			<li>	
				<a href="#"> Home </a>
			</li>
			<li>	
				<a href="#"> Tools </a>
			</li>
			<li>	
				<a href="#"> Workshops </a>
			</li>
			<li>	
				<a href="#"> Technologies </a>
			</li>
			<li>	
				<a href="#"> Pricing </a>
			</li>
			<li style="float: right; background: #ce933c">	
				<a href="#"> Contact Us </a>
			</li>
			<li class="icon">
				<a href="#" onclick="respond()">&#9776; </a> 
			</li>
		</ul>
</body>
</html>
Live Demo of Responsive Navbar
Just Click on the button below to see our responsive navbar in action.






developed & nourished with by rishabh.io