Watch Full Tutorial on YouTube -
Source Code Of Product Card Design -
<link rel="stylesheet" href="css/style.css">
<title>Responsive Navbar Design Using Html, CSS And JavaScript</title>
<header>
<nav class="navbar">
<a class="logo" href="#">Digital Shifu</a>
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
<main>
<section class="hero">
<div>
<h3>Responsive Navbar</h3>
<a class="btn" href="https://www.youtube.com/@digitalshifu">Watch More Videos</a>
</div>
</section>
</main>
Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
header {
background-color: #1EE1A1;
}
li {
list-style: none;
font-weight: 500;
font-size: 20px;
}
a {
color: white;
text-decoration: none;
}
ul li a.active {
color: #A11EE1;
}
.navbar {
margin: 0 auto;
max-width: 1249px;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-list {
display: flex;
align-items: center;
gap: 45px;
}
.logo {
font-size: 2rem;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover {
color: #A11EE1;
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: white;
}
/* ====================
Media Query
======================*/
@media (max-width:768px) {
.navbar {
width: 100%;
}
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-list {
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
background-color: #1EE1A1;
width: 100%;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 25px 0;
}
.nav-list.active {
left: 0;
}
}
/*====================
Main Section CSS
======================*/
main {
background-color: #fff;
padding: 100px 0;
}
main section.hero {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 50px;
height: 60vh;
}
main section.hero h3 {
color: #A11EE1;
font-size: 50px;
}
main section a {
display: inline-block;
margin: 10px 0;
background-color: #A11EE1;
padding: 8px 15px;
border: 1px solid transparent;
transition: all .3s ease-in-out;
}
main section a {
color: #fff;
font-size: 16px;
}
main section a:hover {
background-color: #fff;
border: 1px solid #1EE1A1;
color: #A11EE1;
}
Step 3: Create index.js File
Create one file with the name index.js and paste the below code in this file.
const hamburger = document.querySelector('.hamburger');
const navList = document.querySelector('.nav-list');
hamburger.addEventListener('click', function(){
hamburger.classList.toggle('active')
navList.classList.toggle('active')
})
document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () =>{
hamburger.classList.remove('active')
navList.classList.remove('active')
}))
That’s It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
Download File - https://github.com/tigercodeyt/responsive-nav-bar/archive/refs/heads/main.zip
