How to make my navigation-bar invisible on mobile version of web site?-CodePudding

I am making a website and I have a problem. My navigation bar is showing up on a mobile version of the site while it is off and that should not happen.I tried to find the solution online but I can't find anything. Please if you know a solution please help me. Here is the code if someone wants to help.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header> 
        <nav>
        <ul >
            <li><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Contact us</a></li>
        </ul>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
    </nav>
    <header>

    </header>
    <main>

    </main>
    <footer>

    </footer>
</body>
</html>
<script rel="stylesheet" src="index.js"></script>
</html>

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();

CodePudding user response：

You can use Media Queries to change your css according to the size of the screen:

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;
}

@media screen and (max-width: 480px) {
   nav {
     display:none;
   }
}

This will make your nav invisible in screens smaller than 480px wide.