creating a fully responsive navbar
H T M L
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar - </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fa-solid fa-bars"></i>
</label>
<label class="logo">
reBliss
</label>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</nav>
</body>
</html>
C S S
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
nav{
height: 60px;
background: green;
line-height: 60px;
}
.logo{
font-size: 35px;
color: white;
padding: 0 100px;
}
.checkbtn{
font-size: 25px;
color: white;
float: right;
margin-right: 20px;
display: none;
}
#check{
display: none;
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
}
nav ul li a{
padding: 7px 13px;
color: white;
}
@media (max-width:768px)
{
nav ul{
position: fixed;
background: green;
height: 100vh;
width: 100%;
text-align: center;
top: 62px;
left: -100%;
transition: 0.1s;
}
nav ul li{
display: block;
line-height: 50px;
}
.checkbtn{
display: block;
}
#check:checked ~ ul{
left: 0;
}
}
Comments
Post a Comment