Nodejs responsive menu Cannot read properties of null (reading 'addEventListener')

I´m creating a nodejs Application, I have a header like this:

<header class="header" id="header-container"></header>

And I have the nav component in a component file like this:

<div class="container">
     <nav>
       <div class="Rlogo"><h4>At Home</h4></div>
       
       <ul class="nav-links">
         <li><a href="/#home">Home</a></li>
         <li><a href="/#about">About Us</a></li>
         <li><a href="/#menu">Menu</a></li>
         <li><a href="/#resturant">Resturant</a></li>
         ${ 
          firstname
          ? `<li><a href="/#/profile">${firstname}</a></li>`
          : `<li><a href="/#/signin">Sign-In</a></li>`
          }
         <li><a href="/#/cart">Cart</a></li>
        ${isAdmin?`<li><a href="/#/dashboard"> Dashboard</a></li>`: ''}
       </ul>
       <div class="burger">
         <div class="line1"></div>
         <div class="line2"></div>
         <div class="line3"></div>
       </div>
     </nav>
     </div>
     `;

I have a js function in my scripts file that is linked correctly to my HTML file, the function looks like this:

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.5 ease forwards ${index/7 + 2.0}s`
      }
      });
      // burger animation
      burger.classList.toggle('toggle');
    })
 }
 navSlide();

Which I got from a tutorial but it works correctly on my other project so I wanted to reuse the code for my nodejs app but I´m getting the error in my console: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

my scripts are linked like this:

<script src="./scripts.js"></script>
    <script src="main.js"></script>

I don't know what might be causing this, any help/guidance is much appreciated. I´m using Nodejs and Express.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum