Hey developer we created a Responsive Navbar using HTML and CSS for you. In this project, we use an input element to add the toggle functionality to the Navbar.
And you can get all the source code of this Navbar absolutely free. Check this post copy the code add run in your code editor.
Preview
HTML Code
<!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>Responsive Navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar">
<div class="left">
<h1>Navbar</h1>
</div>
<div class="right">
<input type="checkbox" id="check">
<label for="check" class="checkBtn">
<i class="fa fa-bars"></i>
</label>
<ul class="list">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:wght@300;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #fff;
font-family: 'Ubuntu', sans-serif;
}
.navbar {
background-color: rgb(22, 7, 36);
display: flex;
justify-content: space-around;
align-items: center;
line-height: 5rem;
}
.left h1 {
font-size: 2.5rem;
cursor: pointer;
}
.checkBtn {
display: none;
}
#check {
display: none;
}
.checkBtn {
cursor: pointer;
font-size: 30px;
float: right;
color: #ed1e79;
line-height: 80px;
}
.right ul {
display: flex;
list-style: none;
}
.right ul li a {
padding: 10px 20px;
font-size: 1.2rem;
color: white;
cursor: pointer;
text-decoration: none;
transition: all 1s;
}
.right ul li a:hover {
background-color: #fff;
border-radius: 7px;
color: rgb(22, 7, 36);
}
@media screen and (max-width:805px) {
.list {
width: 100%;
height: 100vh;
background-color: rgb(22, 7, 36);
text-align: center;
display: flex;
flex-direction: column;
position: fixed;
top: 4rem;
left: 100%;
transition: all 1s;
}
#check {
display: none;
}
.checkBtn {
display: block;
}
#check:checked~ul {
left: 0%;
}
}
Thank you so much 🥰
ReplyDeleteThank uuu
DeleteThank you so much
ReplyDeletemost welcome 🤗
Deletemost welcome
Deletethank u so much
Deleteleft right sliding but how to top slide?
ReplyDeleteawesome bro😍😍😍😍
ReplyDeleteHow do you get the drop down list for the break after 805px? Shouldnt Javascript be used for that function?
ReplyDeleteThank you
ReplyDeleteThis is use for my collage project and iam modify some changes
ReplyDeletewhere is java
ReplyDeleteThis project is responsive without JavaScript
Deleteplease provide the real view of the project instead of just image so that we can inspect and make on our own
ReplyDeletePlease try the same code on your Computer or laptop and run index.html. You will the output of the project is same as it is looking in this post
Deletemicwecer
ReplyDeleteThank you
ReplyDeletehi i wrote like your codes in my computer but it doesnt work ...would you please help me
ReplyDeleteMedia core is used here are not
ReplyDelete