Issue with navigation bar when page loads

You can find a link to my site for reference here: http://pensacola.co.uk/

On a desktop device, when you click on the burger menu the navigation bar transitions in from the right-hand side of the page. This functionality works fine, however on a mobile device, when the page loads it includes the navigation items on the right-hand side and therefore doesn’t work properly. Is there any way to fix this so that only my page contents sows until you have clicked on the burger menu?

HTML

<nav>     <div class="logo">       <a href="/">Pensacola</a>     </div>     <ul class="nav-links">       <li><a href="people.html">People</a></li>       <li><a href="culture.html">Culture</a></li>       <li><a href="film.html">Film</a></li>       <li><a href="music.html">Music</a></li>       <li><a href="podcast.html">Podcast</a></li>       <li><a href="books.html">Books</a></li>       <li><a href="art.html">Art</a></li>       <li><p>Pensacola is an independent journalism blog based in the United Kingdom. Focusing on people, culture, art & media.</p></li>     </ul>     <div class="burger">       <div class="line1"></div>       <div class="line2"></div>       <div class="line3"></div>     </div>   </nav> 

CSS

/* Navigtaion - Responsive Format */  @media screen and (max-width:2000px) {    body {     overflow-x: hidden;   }    .nav-links {     background-color: #F4F4F4;     position: absolute;     height: 100%;     width: 100%;     right: 0px;     top: 50px;     display: flex;     flex-direction: column;     align-items: left;     transform: translateX(100%);     transition: transform 0.5s ease-in;     padding-top: 50px;   }    nav {     background-color: #F4F4F4;   }    .burger {     display: block;     cursor: pointer;   }  }  @media screen and (max-width: 900px) {    .nav-links li {     font-size: 20pt;   }    .nav-links li p {     width: 90%;   }  }  .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,5px); }  .toggle .line2 {   opacity: 0; }  .toggle .line3 {   transform: rotate(45deg) translate(-5px,-5px); } 

JS

const navSlide = () => {   const burger = document.querySelector('.burger');   const nav = document.querySelector('.nav-links');   const navLinks = document.querySelectorAll('.nav-links li');    burger.addEventListener('click',()=> {     // Toggle nav     nav.classList.toggle('nav-active');      // Animate links     navLinks.forEach((link, index) => {       if(link.style.animation) {          link.style.animation = '';       } else {       link.style.animation = `navLinkFade 0.5 ease forwards ${index / 7 + 3}s`;     }   });    //Burger animation   burger.classList.toggle('toggle');  });  }