Here in this blog, we will learn how to create a responsive navbar in just some line of HTML and CSS code. No need for javascript for the design.
Full tutorial video: https://youtu.be/JmcN_f7aKd8
Output
![]() |
Desktop View |
![]() |
Mobile View |
Source code
👉 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"> <title>Responsive NavBar</title> <link rel="stylesheet" href="style.css"></head><body> <header> <b class="logo">Scoobcode</b> <input type="checkbox" name="" id="tapmenu"> <label for="tapmenu" class="tapnav"> <span></span> <span></span> <span></span> </label> <nav class="navmenu"> <a href="#" class="menu">Home</a> <a href="#" class="menu">About</a> <a href="#" class="menu">Contact</a> </nav> </header> <section> <h1>This is a Responsive NavBar</h1> </section></body></html>👉 CSS
*{ margin: 0; padding: 0; font-family: 'Courier New', Courier, monospace; text-decoration:none ;}
header{ height: 15vh; display: flex; justify-content: space-around; align-items: center; background-color: black;}.logo{ font-size: 35px; color: white;}.menu{ color: rgb(255, 255, 255); font-size: 25px; padding: 10px 20px; border-radius: 5px;}.menu:hover{ background-color: turquoise; color: black;}.tapnav{ display: none;}span{ display: flex; height: 3px; width: 20px; background-color: white; margin: 5px;}#tapmenu{ display: none;}
section{ height: 85vh; display: flex; justify-content: center; align-items: center; text-align: center;}
/* responsive menu */
@media (max-width: 900px){ .navmenu{ position: fixed; height: 100vh; width: 100%; background-color: black; top: 15vh; left: -100%; transition: all 0.3s ease; } .menu{ display: flex; justify-content: center; line-height: 60px; } .menu:hover{ background-color: transparent; color: turquoise; } .tapnav{ display: block; }
#tapmenu:checked ~ .navmenu{ left: 0; }}
You can support me to like this blog and share it with your programmer friends. Go to my youtube channel scoobcode and watch the full tutorial video.
Comments
Post a Comment