Hide Javascript menu

Question

With the code I created I am not able to hide my menu, even closing and opening the burger menu and creating the effect the menu is not hidden. Could you help me and tell me where I’m going wrong?

var hamburguer = document.querySelector('.hamburguer');
var nav = document.querySelector('.navLinks');
var navLinks = document.querySelectorAll('.navLinks li');

/*Funcionalidade do Menu Hamburguer */
function mostrarMenu(){
    hamburguer.addEventListener('click', function () {
        nav.classList.toggle('navAtiva');
    });
}
mostrarMenu();

/*Animação dos links */
function animacao() {
    hamburguer.addEventListener('click', function () {
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = '';
            } else {
                link.style.animation = `navLinkDesaparece 0.5s ease forwards ${index / 7 + 0.3}s`;
            }
        });
        hamburguer.classList.toggle('hamburguerAlternar');
    });
}
animacao();

*{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
} 
nav{
    top: 0;
    left: 0;
    padding: 0 70px;/*Margem do Logo*/
    box-sizing: border-box;
    width: 100%;
    background-color: rgb(53, 53, 53);
    font-weight: bolder;
    height: 55px;
}
nav img{
    height: 50px;
    float: left;
    cursor: pointer;
    margin: 3px;
    margin-bottom: 4px;
}
.navLinks{
    float: right;
}
nav ul{
    margin: 0;
    padding: 0;
    display: flex;
}
nav ul li{
    list-style: none;
}
nav ul li a{
    height: 50px;
    line-height: 50px;
    margin: 0 16px;
    color: #00ced1;
    text-decoration: none;
}
nav ul li a:hover{
    color: #ffffff;
}

.hamburguer{
    display: none;
    cursor: pointer;
    float: right;
    color: #00ced1;
}
.hamburguer div{
    width: 22px;
    height: 3px;
    background-color: rgb(21, 126, 126);
    margin: 5px;
    transition: all 0.6s ease; /*Transition para menu Hamburguer virar X*/
}

@media screen and (max-width: 991px){
    nav{
        padding: 0 20px;
        height: 35px;
    }
    .hamburguer{
        display: block;
    }
    nav img{
        position: absolute;
    }
    nav .navLinks{
        position: absolute;
        width: 100%;
        height: calc(100vh - 50px);
        background: rgb(53, 53, 53);
        top: 35px;
        left: 0;
        transition: 0.6s;
        font-size: 18px;
    }
    nav ul{
        display: block;
        text-align: center;
    }
}
.navAtiva{
    transform: translate(0%);
}

/*Adicionando animação*/
@keyframes navLinkDesaparece{
    from{
        opacity: 0;
        transform: translateX(100px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

/*Transformando Menu Hamburguer em X*/
.hamburguerAlternar .linha1{
    transform: rotate(45deg) translate(5px, 6px);
} 
.hamburguerAlternar .linha2{
    opacity: 0;
} 
.hamburguerAlternar .linha3{
    transform: rotate(-45deg) translate(5px, -6px);
} 


/*CAPA*/

    <nav>
        <div class="logo">
            <img src="img/thpernomian.png" alt="">
        </div>
        <ul class="navLinks">
            <li><a href="#">Início</a></li>
            <li><a href="#">Sobre mim</a></li>
            <li><a href="#">Portfólio</a></li>
            <li><a href="#">Hobbies</a></li>
            <li><a href="#">Contato</a></li>
        </ul>

        <div class="hamburguer">
            <div class="linha1"></div>
            <div class="linha2"></div>
            <div class="linha3"></div>
        </div>
    </nav>

Answer 1

The .navLinks (menu) should already come hidden. Add display: none in class:

.navLinks{
    float: right;
    display: none;
}

Then just create another breakpoint with min-width: 992px before what already exists of max-width: 991px:

@media screen and (min-width: 992px){
   .navLinks{
     display: flex;
   }
}

That is, if the width of the screen is greater than 991px, the menu goes back to normal and displays the items.

Behold:

var hamburguer = document.querySelector('.hamburguer');
var nav = document.querySelector('.navLinks');
var navLinks = document.querySelectorAll('.navLinks li');

/*Funcionalidade do Menu Hamburguer */
function mostrarMenu(){
    hamburguer.addEventListener('click', function () {
        nav.classList.toggle('navAtiva');
    });
}
mostrarMenu();

/*Animação dos links */
function animacao() {
    hamburguer.addEventListener('click', function () {
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = '';
            } else {
                link.style.animation = `navLinkDesaparece 0.5s ease forwards ${index / 7 + 0.3}s`;
            }
        });
        hamburguer.classList.toggle('hamburguerAlternar');
    });
}
animacao();

*{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
} 
nav{
    top: 0;
    left: 0;
    padding: 0 70px;/*Margem do Logo*/
    box-sizing: border-box;
    width: 100%;
    background-color: rgb(53, 53, 53);
    font-weight: bolder;
    height: 55px;
}
nav img{
    height: 50px;
    float: left;
    cursor: pointer;
    margin: 3px;
    margin-bottom: 4px;
}
.navLinks{
    float: right;
    display: none;
}

nav ul{
    margin: 0;
    padding: 0;
    display: flex;
}
nav ul li{
    list-style: none;
}
nav ul li a{
    height: 50px;
    line-height: 50px;
    margin: 0 16px;
    color: #00ced1;
    text-decoration: none;
}
nav ul li a:hover{
    color: #ffffff;
}

.hamburguer{
    display: none;
    cursor: pointer;
    float: right;
    color: #00ced1;
}
.hamburguer div{
    width: 22px;
    height: 3px;
    background-color: rgb(21, 126, 126);
    margin: 5px;
    transition: all 0.6s ease; /*Transition para menu Hamburguer virar X*/
}

@media screen and (min-width: 992px){
   .navLinks{
     display: flex;
   }
}

@media screen and (max-width: 991px){
    nav{
        padding: 0 20px;
        height: 35px;
    }
    .hamburguer{
        display: block;
    }
    nav img{
        position: absolute;
    }
    nav .navLinks{
        position: absolute;
        width: 100%;
        height: calc(100vh - 50px);
        background: rgb(53, 53, 53);
        top: 35px;
        left: 0;
        transition: 0.6s;
        font-size: 18px;
    }
    nav ul.navAtiva{
        display: block;
        text-align: center;
    }
}
.navAtiva{
    transform: translate(0%);
}

/*Adicionando animação*/
@keyframes navLinkDesaparece{
    from{
        opacity: 0;
        transform: translateX(100px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

/*Transformando Menu Hamburguer em X*/
.hamburguerAlternar .linha1{
    transform: rotate(45deg) translate(5px, 6px);
} 
.hamburguerAlternar .linha2{
    opacity: 0;
} 
.hamburguerAlternar .linha3{
    transform: rotate(-45deg) translate(5px, -6px);
} 

<nav>
  <div class="logo">
      <img src="img/thpernomian.png" alt="">
  </div>
  <ul class="navLinks">
      <li><a href="#">Início</a></li>
      <li><a href="#">Sobre mim</a></li>
      <li><a href="#">Portfólio</a></li>
      <li><a href="#">Hobbies</a></li>
      <li><a href="#">Contato</a></li>
  </ul>

  <div class="hamburguer">
      <div class="linha1"></div>
      <div class="linha2"></div>
      <div class="linha3"></div>
  </div>
</nav>