Responsive Navigation Bar using Only HTML and CSS
Responsive Navigation Bar
NavBar Demo 👇
HTML:
<!--RESPONSIVE NAVBAR-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NavBar</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<label for="logo"> <a href="#home" class="logo">LOGO</a> </label>
<nav class="navbar">
<input type="checkbox" id="check">
<label for="check" class="bar">
<i class="fas fa-bars"></i>
</label>
<ul>
<li> <a href="#" class="active">HOME</a> </li>
<li> <a href="#">ABOUT</a> </li>
<li> <a href="#">SKILLS</a> </li>
<li> <a href="#">GALLERY</a> </li>
<li> <a href="#">CONTACT ME</a> </li>
</ul>
</nav>
</body>
</html>
CSS:
body{
padding: 0;
margin: 0;
background-color: #333;
color: #fff;
}
a{
color: #fff;
text-decoration: none;
}
label .logo{
position: absolute;
font-size: 2rem;
font-weight: bold;
padding: 5px;
margin-left: 10%;
line-height: 68px;
}
.navbar{
background-color: #111;
width: 100%;
height: 72px;
}
.navbar ul{
position: absolute;
right: 0;
margin-right: 10%;
}
.navbar ul li{
float: left;
font-size: 18px;
list-style: none;
padding: 18px;
}
a.active, a:hover{
border-bottom: 2px solid #1bac91;
transition: 0.5s ease-in-out 0.3s;
}
.bar{
float: right;
margin-right: 50px;
display: none;
}
#check{
display: none;
}
@media (max-width: 768px) {
.navbar ul li{
float: none;
position: relative;
background-color: #f1f1f1;
padding: 5%;
}
.navbar a{
color: #444;
line-height: 20px;
}
.navbar ul{
width: 100%;
background-color: transparent;
padding: 5%;
left: -100%;
box-sizing: border-box;
margin-top: 72px;
right: 25%;
}
a.active, a:hover{
color: #000;
}
.bar{
font-size: 25px;
color: white;
display: block;
line-height: 68px;
margin-left: 80%;
padding: 5px;
cursor: pointer;
}
#check:checked~ul{
left: 0;
}
Comments
Post a Comment