A responsive nav bar source code using html and css only
BY Wpdevkit
January 26, 2020
HTML / CSS 
A responsive nav bar source code using html and css only
//Html code
<html>
<head>
<title>WPDEVKIT | Test responsive header</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<input class="bar" type="checkbox" id="check">
<label for="check" class="checkbtn"><i class="fas fa-bars"></i></label>
<label class="branding">WPDEVKIT</label>
<ul class="nav_item">
<li class="nav_item_list"><a href="#" class="active">Home</a></li>
<li class="nav_item_list"><a href="#">Bolly</a></li>
<li class="nav_item_list"><a href="#">Holly</a></li>
<li class="nav_item_list"><a href="#">Dubbed</a></li>
<li class="nav_item_list"><a href="#">Webseries</a></li>
</ul>
</nav>
</body>
</html>//css code
*{
font-family:Montserrat;
}
nav{
background:#0082e6;
height:80px;
width:100%;
}
.branding{
line-height:80px;
font-size:30px;
text-transform:uppercase;
margin: 0 90px;
color:#fff;
}
nav ul{
list-style:none;
display:inline-flex;
float:right;
line-height:80px;
color:#fff;
margin-right:50px;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color:#fff;
text-decoration:none;
font-size:18px;
text-transform:uppercase;
}
nav ul li a.active, nav ul li a:hover{
background:#1b9bff;
padding:5px 10px;
border-radius:4px;
color:#fff;
text-decoration:none;
}
.checkbtn{
color:#fff;
font-size:30px;
float:right;
line-height:80px;
margin-right:50px;
display:none;
}
#check{
display:none;
}
@media (max-width: 900px){
.checkbtn{
display:block;
}
nav ul{
display:block;
background:black;
width:100%;
margin:0;
padding:0;
text-align:center;
position:absolute;
left:-100%;
top:80px;
transition: all .5s;
}
.branding{
margin-left: 35px
}
#check:checked ~ ul{
left:0;
}
nav ul li{
border-bottom:1px solid #a6a6a6;
margin:0;
padding:0;
height:70px;
line-height:70px;
}
nav ul li:hover{
width:100%;
background:#1b9bff;
}
nav ul li a.active{
background:none;
color:#0082E6;
}
}
POST COMMENTS
