Responsive Menu using HTML & CSS is can make your site header part looks good.In this post we cover make responsive navigation menu easiest way using HTML & CSS.
When you’re creating a website, a navigation bar and the way you design responsive navigation bar is important. The design comes down to the end-user experience. If you design a great and easy to manage navigation bar, your visitors will be happy. If a user has a hard time navigating the navigation bar, they might very well leave your website and never return.
Responsive Menu Example :
View Demo Download Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive HTML-CSS Navbar | CodeWithNevil</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<style type="text/css">
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: Arial;
}
nav{
background: black;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 25px;
line-height: 80px;
padding: 0 10px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 10px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #1b9bff;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 10px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
@media (max-width: 952px){
label.logo{
font-size: 20px;
padding-left: 10px;
}
nav ul li a{
font-size: 16px;
}
}
@media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
}
</style>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">LOGO</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</nav>
</body>
</html>Know More About Navigation Menu :
A navigation bar allows you the opportunity to prioritise the content you want visitors to read. It also enables you to take your visitor on a journey, from the most important pages at the top-left of the navigation menu to the lesser important pages at the top-right of the navigation menu.
Navigation on a website is achieved by a collection of links that form the Website Navigation Menu or the Website Navigation Bar. This navigation menu or bar is usually the collection of links you see placed vertically on the left or horizontally near the top of the web page and sometimes on the footer of the web page.
