JavaScript bug

Hi, I have this website https://hungry-pike-43b2a3.netlify.com/
The problem is that on mobile I can click the burger only next to the burger for it to work. The reason is I added a function that allows me to close the nav on outside click or a click an a parent element.
How can I fix this issue. Here is the code.

HTML
[/code]<nav>

<div class=”logo”>
<p>HouseSeek</p>
</div>


<div class=”nav-links”>
<ul>
<li><a href=”#”>SELL</a></li>
<li><a href=”#buy”>BUY</a></li>
<li><a href=”#recomand”>RENT</a></li>
</ul>
<ul>
<li><a href=”#about”>About Us</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>
</div>

<div class=”burger”>
<div class=”line1″></div>
<div class=”line2″></div>
<div class=”line3″></div>
</div>

</nav>[/code]

JS

[code]const burger = document.querySelector(‘.burger’);
const navLinks = document.querySelector(‘.nav-links’);

burger.addEventListener(‘click’, () => {

navLinks.classList.toggle(‘nav-active’);
burger.classList.toggle(‘animation’);

})

window.addEventListener(‘mouseup’, (e) => {
if(e.target != navLinks && e.target != burger) {

navLinks.classList.remove(‘nav-active’);
burger.classList.remove(‘animation’);
}

})
[/code]

Also in #JavaScript _↴