Как сделать панель навигации невидимой в мобильной версии сайта? ⇐ CSS

[Anonymous]

Я создаю веб-сайт и у меня возникла проблема. Моя панель навигации отображается в мобильной версии сайта, когда она выключена, а этого не должно происходить. Я пытался найти решение в Интернете, но ничего не нашел. Если вы знаете решение, пожалуйста, помогите мне. Вот код, если кто-то хочет помочь:
HTML:








Exemple
[*]

• Home
• News
• About Us
• Contact us

CSS:
*{
margin: 0;
}

nav{
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgba(48, 47, 47, 0.816);
color: rgb(255, 255, 255);
min-height: 8vh;
}

.nav-links{
display: flex;
justify-content: space-around;
width: 60%;
}

.nav-links a{
color: rgb(255, 255, 255);
text-decoration: none;
font-weight:bold;
font-size: large;
}

.nav-links li{
list-style: none;
}
.kocka{
display: none;
cursor: pointer;
}

.kocka div{
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.2s ease;
}

@media screen and (max-width: 768px){
body {
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: rgba(48, 47, 47, 0.816);
color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;

}
.nav-links li{
opacity: 1;
}
.kocka{
display: block;
}
}

.nav-active {
transform: translateX(0%);
}

@keyframes navLinksFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}

.toggle .linija1{
transform:rotate(-45deg) translate(-5px , 6px);
}
.toggle .linija2{
opacity: 0;
}
.toggle .linija3{
transform:rotate(45deg) translate(-5px , -6px);
}

JavaScript:
const navSlide = () => {
const kocka = document.querySelector('.kocka');
const nav = document.querySelector('.nav-links');
const navlinks = document.querySelectorAll('.nav-links li');

kocka.addEventListener('click', () => {
nav.classList.toggle('nav-active');
navlinks.forEach((link , index)=>{
if(link.style.animation){
link.style.animation = 'none'
}else{
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+1.5}s`;
}
});
kocka.classList.toggle('toggle');
});

}

navSlide();


Подробнее здесь: https://stackoverflow.com/questions/733 ... f-web-site