Responsive Navigation Menu using HTML & CSS Only

byCodingFlicks -September 15, 2020

0

Responsive Navigation Menu using HTML CSS Only

A navigation menu or navigation bar is considered the roadmap of any website. In a navigation menu, we can see a collection of links or buttons that guide us to different sections or pages of that website. It helps us to find out what we are looking for quickly and easily. In this blog post, we will create a responsive navigation menu using only HTML and CSS. There is a video tutorial below to help you figure out how this responsive navigation will work if we run it in a browser.

Video Tutorial:

If users visit a website and can't find any navigation menu, they would feel lost. There is a chance of leaving the website out of frustration if they fail to find out what they are looking for. A well-designed navigation menu makes the user experience smooth and enjoyable for the user. A navigation menu is normally found at the top of a website. Some websites keep them on the side or even at the bottom. It is dependent on the design of that website. A responsive navigation menu is the smartest and most adaptable version of a normal navigation menu we see on a website. It adjusts itself according to the screen size of any device. As we know, in this modern landscape, people access websites from a variety of devices. A responsive menu ensures everyone has a seamless experience on any type of device they browse from. A professional responsive navigation menu contributes to the overall structure and organization of your site. It also plays a helpful role in the SEO of that website.

You May also like:

Responsive Navigation Menu using HTML & CSS [ Source Code ]:

You need to create two files: one for HTML and another for CSS. After creating the files, copy the code below and paste it into the respective file. Save the files, run the project in your browser, and modify it as needed. You can download the source code by clicking the download button below this blog post.

HTML

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigation Menu using HTML & CSS Only</title>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="nav-area">
		<input id="box" type="checkbox"> 
        <label class="btn-area" for="box"><i class="fa fa-bars"></i></label> 
        <label class="logo"><img alt="" src="logo.png"></label>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</body>
</html>

CSS

  * {
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;
	box-sizing: border-box;
}
body {
	font-family: lato;
}
.nav-area {
	background: #262626;
	height: 62px;
	width: 100%;
}
.logo {
	line-height: 70px;
	padding: 0 40px;
}
.nav-area ul {
	float: right;
	margin-right: 20px;
}
.nav-area ul li {
	display: inline-block;
	line-height: 60px;
	margin: 0 5px;
}
.nav-area ul li a {
	color: #fff;
	font-size: 14px;
	padding: 22px 15px;
	text-transform: uppercase;
	font-weight: bold;
}
.nav-area ul li a:hover {
	background: darkorange;
	transition: .5s;
}
.btn-area {
	font-size: 30px;
	color: white;
	float: right;
	line-height: 62px;
	margin-right: 40px;
	cursor: pointer;
	display: none;
}
#box {
	display: none;
}
@media (max-width: 860px) {
	.btn-area {
		display: block;
	}
	.nav-area ul {
		position: fixed;
		width: 100%;
		height: 100vh;
		background: darkorange;
		top: 62px;
		left: -100%;
		text-align: center;
		transition: all .5s;
	}
	.nav-area ul li {
		display: block;
		margin: 0;
		line-height: 14px;
		padding: 25px 0;
	}
	.nav-area ul li a {
		font-size: 14px;
	}
	.nav-area ul li:hover {
		background: #000;
	}
	.nav-area ul li a:hover {
		background: none;
	}
	#box:checked~ul {
		left: 0;
	}
}

A good responsive navbar enhances user experience, keeps visitors engaged, etc. In this modern digital world, a responsive and intuitive navigation menu is not just a design choice, it is a necessity. We hope you have collected the code. For more please click the load more button on our homepage. Thanks for the visit.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.