Responsive Navigation Menu Bar Design using only HTML & CSS
Hi everyone, we are going to learn how to create a Responsive Navigation Menu Bar By using only HTML and CSS
What is Navigation Menu Bar?
Fundamentally, a navigation menu bar is an organized list of links to other web pages, usually internal pages. Navigation menus appear most commonly in page headers or sidebars across a website page, allowing visitors to quickly access the most useful pages. One more principle reason for the navigation bar is to make the user’s access helpful page and make life easier on all screen devices.
From the above-given UI design of this Navbar Menu. On the desktop format, our navigation bar is on top which is a horizontal bar. Â And while on mobile and tablet is navigation bar hidden under the icon menu
How do I create a simple navigation bar in HTML and CSS?
Here is a full video tutorial of this code which is given below, which will allow you to understand this coding of the Responsive Navigation Menu Bar.
Create Responsive Navigation Menu Bar in HTML CSS [Video Tutorial below]
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>responsive navigation menu bar using html & css</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="header">
<input type="checkbox" id="check" />
<label for="check" class="checkbtn">
<i class="fas fa-bars" id="openbtn"></i>
</label>
<div class="logo">Next Coding</div>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="main">
</div>
</body>
</html>
You Might Like This
- Sidebar Menu Using Html and CSS Animated Menu Sidebar
- 3D Flip Card Effect On Hover – HTML and CSS only
- Create Hero section with Html and CSS – Simple Hero section
CSS
/* #FF155C
#7DA4AC
*/
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.header{
background: #FF155C;
width: 100%;
height: 80px;
padding: 0 60px;
}
.logo{
color: #f2f2f2;
font-size: 25px;
font-weight: bold;
display: inline-block;
line-height: 80px;
}
.active{
background: #7DA4AC;
border-radius: 5px;
}
ul{
display: inline-block;
position: absolute;
right: 0;
line-height: 80px;
padding: 0 60px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #ffffff;
font-size: 18px;
margin-right: 10px;
padding: 10px 20px;
}
ul li a:hover{
background: #7DA4AC;
border-radius: 5px;
transition: .02s;
}
/* mobile icon bars */
#check{
display: none;
}
.checkbtn{
font-size: 30px;
color: #ffffff;
position: absolute;
right: 20px;
top: 20px;
display: none;
}
/* main content section */
.main{
background-image: url("bg.jpg");
height: 100vh;
background-position: center;
background-size: cover;
}
/* Responsive Mobile section */
@media screen and (max-width:960px){
.header{
padding: 0 30px;
}
.logo{
font-size: 20px;
}
ul{
position: fixed;
top:80px;
right: 0;
background: #7DA4AC;
width: 100%;
height: 100vh;
text-align: center;
left: -100%;
transition: 0.5s;
}
ul li {
display: block;
}
ul li a:hover{
color: #FF155C;
}
.checkbtn{
display: block;
}
#check:checked ~ ul
{
left: 0;
}}
Thanks Bros