hamburger.addEventListener is not a function

I'm building a simple hamburger menu for mobile but I run into the same error and I can't understand why it's happening.

The idea is only to show the hamburger menu only for the mobile version and when you click on it displays the nav links.

Should I use "onClick()" instead of the "eventListener"?

HTML:

<div class="hero">
        <nav>
            <h2 class="logo">Port<span>folio</span></h2>
            <ul class="desktopNav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
            <div id="hamburgerMenu" class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </div

js:

const hamburger = document.getElementById("hamburgerMenu");
const desktopNav = document.getElementsByClassName("desktopNav");

console.log(hamburger);

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  desktopNav.classList.toggle("active");
});

the console.log outputs "null".

CSS:

.hamburger{
    display: none;
}
.bar{
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: white;
}
@media(max-width: 757.98px){
    .hamburger{
        display: block;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
    .desktopNav{
        display: none;
    }
}

Error (when the page loads):

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')