![](https://wpdevkit.in/wp-content/themes/twentytwenty-child/imgs/post01.jpg)
A responsive nav bar source code using html and css only
![](https://wpdevkit.in/wp-content/themes/twentytwenty-child/li_st1.png)
![](https://wpdevkit.in/wp-content/themes/twentytwenty-child/li_st1.png)
![](https://wpdevkit.in/wp-content/themes/twentytwenty-child/li_st1.png)
![](https://wpdevkit.in/wp-content/themes/twentytwenty-child/imgs/kand5.png)
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; } }
![](https://wpdevkit.in/wp-content/themes/twentytwenty-child/author.jpg)
POST COMMENTS