How to Create Responsive HTML and CSS Navbar || Navbar || Responsive Navbar
Responsive HTML and CSS Navbar
This tutorial is for those who already knows HTML and CSS.
Create nav.html and nav.css file in your respective code editor or IDE and copy the code below respectively
Nav.html
<!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">
<link rel="stylesheet" href="nav.css">
<title>Responsive NavBar</title>
</head>
<body>
<nav class="nav">
<input type="checkbox" name="" hidden class="collapse" id="collapse">
<div class="nav-body">
<a href="" class="brand">Brand</a>
<ul class="nav-menu">
<li class="nav-list"><a href="">Home</a></li>
<li class="nav-list"><a href="">About</a></li>
<li class="nav-list"><a href="">Services</a></li>
<li class="nav-list"><a href="">Blog</a></li>
<li class="nav-list"><a href="">Contact</a></li>
</ul>
<label for="collapse" class="burger">
<div class="common one"></div>
<div class="common two"></div>
<div class="common three"></div>
</label>
</div>
<div class="nav-body-2">
<ul class="nav-menu-2">
<li class="nav-list-2"><a href="">Home</a></li>
<li class="nav-list-2"><a href="">About</a></li>
<li class="nav-list-2"><a href="">Services</a></li>
<li class="nav-list-2"><a href="">Blog</a></li>
<li class="nav-list-2"><a href="">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
*{
box-sizing: border-box;
}
html, body{
padding: 0;
margin: 0;
width: 100%;
max-width: 100vw;
}
nav{
width: 100%;
max-width: 100vw;
padding: 1%;
height: 100%;
background-color: rgb(29, 29, 29);
}
.nav-body{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.brand{
text-decoration: none;
font-size: xx-large;
font-weight: bolder;
color:white;
}
.nav-menu{
width: 30%;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
}
.nav-list a{
text-decoration: none;
font-size: large;
font-weight: bold;
color: white;
}
.drop{
display: none;
}
.nav-list a:hover{
color: rgb(207, 207, 207);
}
.brand:hover{
color: orangered;
letter-spacing: 2px;
transition: letter-spacing .5s;
}
.burger{
cursor: pointer;
display: none;
}
.common{
width: 30px;
height: 3px;
background-color: white;
}
.two{
margin-top: 5px;
margin-bottom: 5px;
}
.nav-menu-2{
display: none;
}
/* mobile */
@media only screen and (max-width: 1400px) {
.nav-menu{
width: 35%;
}
}
@media only screen and (max-width: 1024px) {
body{
background-color: yellow;
}
.nav-menu{
width: 40%;
}
}
@media only screen and (max-width: 850px) {
.nav-menu{
display: none;
}
.burger{
display: grid;
align-items: center;
}
nav{
padding: 2%;
}
.nav-body-2{
height: 0px;
width: 100%;
padding: 0;
margin: 0;
position: relative;
top: 0;
overflow: hidden;
transition: height .3s;
}
.nav-menu-2{
list-style: none;
background-color:rgb(29, 29, 29) ;
display: grid;
align-items: center;
}
.nav-list-2 a{
text-decoration: none;
font-size:medium;
font-weight: bold;
color: white;
}
.nav-list-2{
padding: 3px;
}
.collapse:checked~.nav-body-2{
height: 150px;
transition: height .3s;
}
}
@media only screen and (max-width: 768px) {
body{
background-color: rgb(133, 133, 190);
}
}
@media only screen and (max-width: 425px) {
body{
background-color: tomato;
}
}
For business purpose visit my Website Lazy designers
Comments
Post a Comment