Responsive nav bar
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
min-height: 10vh;
background-color: #0B2027;
}
.logo{
color: #F6F1D1;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 14px;
cursor: pointer;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 25%;
}
.nav-links li{
list-style: none;
}
.nav-links .signup a{
border-left: 1px solid #F6F1D1;
padding: 5px 0px 5px 17px;
}
.nav-links .login a{
background-color: #F6F1D1;
border-radius: 5px;
padding: 5px 17px;
color: #0B2027;
}
.nav-links a{
text-decoration: none;
color: #F6F1D1;
letter-spacing: 2px;
font-weight: bold;
transition: 0.1s;
}
.nav-links a:hover{
color: #CFD7C7;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
background-color: #F6F1D1;
height: 2px;
width: 30px;
margin: 6px;
transition: 1s;
}
@media screen and (max-width: 1024px){
.nav-links{
width: 45%;
}
}
@media screen and (max-width: 768px){
body{
overflow-y: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #0B2027;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links a{
font-size: 20px;
}
.nav-links .signup a{
border-left: 1px solid transparent;
padding: 0px;
}
.burger{
display: block;
}
.nav-links li{
opacity: 0;
}
}
.nav-active{
transform: translateX(0%);
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px)
}
to{
opacity: 1;
transform: translateX(0px)
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px, -6px);
} *{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
min-height: 8vh;
background-color: #0B2027;
}
.logo{
color: #F6F1D1;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 14px;
cursor: pointer;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 25%;
}
.nav-links li{
list-style: none;
}
.nav-links .signup a{
border-left: 1px solid #F6F1D1;
padding: 5px 0px 5px 17px;
}
.nav-links .login a{
background-color: #F6F1D1;
border-radius: 5px;
padding: 5px 17px;
color: #0B2027;
}
.nav-links a{
text-decoration: none;
color: #F6F1D1;
letter-spacing: 2px;
font-weight: bold;
transition: 0.1s;
}
.nav-links a:hover{
color: #CFD7C7;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
background-color: #F6F1D1;
height: 2px;
width: 30px;
margin: 6px;
transition: 1s;
}
@media screen and (max-width: 1024px){
.nav-links{
width: 45%;
}
}
@media screen and (max-width: 768px){
body{
overflow-y: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 10vh;
background-color: #0B2027;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links a{
font-size: 20px;
}
.nav-links .signup a{
border-left: 1px solid transparent;
padding: 0px;
}
.burger{
display: block;
}
.nav-links li{
opacity: 0;
}
}
.nav-active{
transform: translateX(0%);
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px)
}
to{
opacity: 1;
transform: translateX(0px)
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px, -6px);
}
const navSlide = () => {
const burger = document.querySelector('.burger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//toggle navbar
navLinks.classList.toggle('nav-active');
//nav links fade animation
links.forEach((link, index) => {
if (link.style.animation){
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();