Hello i am trying to translate the nav links during small devices and it works however it is scrolling sideways and the overflow hidden for the parent element is not working i thought it will crop the element if it is placed on the right of the screen. any suggestions
const navSlide=()=>{
const burger= document.querySelector('.burger');
const nav= document.querySelector('.nav-links');
const navLinks= document.querySelectorAll('.nav-links li')
//toggle nav
burger.addEventListener('click',()=>{
nav.classList.toggle('nav-active');
//animate links
navLinks.forEach((link,index)=>{
if(link.style.animation){
link.style.animation= '';
}
else{
link.style.animation = `navLinkFade 0.5s ease forwards ${index/7 +0}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();@media screen and (max-width:700px){
nav{
overflow: hidden;
}
.nav-links{
display: flex;
justify-content: space-around;
align-items:center;
flex-direction: column;
position: absolute;
height: 84vh;
width: 100%;
top:15vh;
left: 0;
background-color: #f44336;
z-index: 5;
transform: translateX(100%);
transition: transform 0.5s ease-in-out;
}
.nav-links li{
opacity: 0;
}
.nav-links li a{
font-size: 30px;
font-weight: 700;
}
.burger{
display: block;
cursor: pointer;
}
.nav-active{
transform:translateX(0%);
}
@keyframes navLinkFade {
from{
opacity: 0;
transform: translateX(50px);
}
to{
transform: translateX(0px);
opacity: 1;
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
}<nav>
<a href="./index.html"><img src="./Images/Screenshot_2022-08-14_230341-removebg.png"/></a>
<ul class="nav-links">
<li><a>About</a></li>
<li><a>Work</a></li>
<li><a>Projects</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>