Query selector selecting an invisible element

Question

Currently have a website that utilizes JavaScript to make CSS elements visible & invisible. One element being within the HTML and the other in CSS. This is the hamburger menu.

Attempting to close the hamburger menu tapping/clicking outside of the container.

The issue with selecting the current open state, is that it's not a valid element in the HTML. Un-sure how to find a way around this. Any help is greatly appreciated. Thank you

document.querySelector('#menu-icon').addEventListener('click', function() {
    document.querySelector('.nav-container').classList.toggle('nav-open')
})

document.querySelector('#close').addEventListener('click', function() {
    document.querySelector('.nav-container').classList.toggle('nav-open')
})

window.addEventListener('mouseup', function(event){
    var menu = document.querySelector('.nav-open');
    if (event.target != menu && event.target.parentNode != menu){
        menu.style.display = 'none';
    }
});

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color:#000;
    font-family: 'EurostileBold', sans-serif;
}

#background{
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    z-index: 999;
}

.nav-container {
    position:absolute;
    top:0px;
    left:-340px;
    width: -340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(-340px,0);
    -ms-transform: translateY(-340px,0);
    transition: all 0.5s;
}

.nav-open {
    position:absolute;
    top:0px;
    left:0px;
    width:340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(340px,0);
    -ms-transform: translateY(340px,0);
    transition: all 0.5s;
}

.nav #close{
    position:absolute;
    top:35px;
    left:75px;
    width:20px;
    height:20px;
    background-size: 100% 100%;
    background-image:url(https://blacklist-rs.com/design/img/close.svg);
    background-repeat: no-repeat;
    cursor:pointer;
}

@media only screen and (max-width: 1280px) {
    .header #menu-icon{
        left: 35px;
        top: 46px;
        position: absolute;
        width: 30px;
        height: 30px;
        background-image:url(https://blacklist-rs.com/design/img/menu.svg);
        background-repeat: no-repeat;
        cursor:pointer;
    }   }

                <div class="header">
      <div id="menu-icon"></div>
                <div class="logo"></div>        
                <div class="nav">
                <div class="nav-container">
                    <div id="close"></div>
                    <div class="main-menu">
                    <ul class="menu">
        <li><a href="#home">Home</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#services">Services</a> </li>
        <li><a href="#contact">Contact</a> </li>
        </ul></div>
    </div>
  </div>

Answer 1

I see one error in the html though. You forgot to close one div element. Add </div> in the html at last.

Answer 2

If fixed your code, it is based on this answer. You can tune it if you need not to close the menu when menu item was clicked ;)

const navContainer = document.querySelector('.nav-container');
const toggleMenu = (e, flag) => {
  e.stopPropagation();
  const isMenuShown = navContainer.classList
    .contains('nav-open');
  const shouldOpenMenu = flag === undefined 
    ? !isMenuShown
    : flag;
    
  navContainer.classList.toggle('nav-open', shouldOpenMenu);
};

window.addEventListener('click', (e) => toggleMenu(e, false));

document.querySelector('#menu-icon')
  .addEventListener('click', (e) => toggleMenu(e))

document.querySelector('#close')
  .addEventListener('click', (e) => toggleMenu(e));

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color:#000;
    font-family: 'EurostileBold', sans-serif;
}

#background{
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    z-index: 999;
}

.nav-container {
    position:absolute;
    top:0px;
    left:-340px;
    width: -340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(-340px,0);
    -ms-transform: translateY(-340px,0);
    transition: all 0.5s;
}

.nav-open {
    position:absolute;
    top:0px;
    left:0px;
    width:340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(340px,0);
    -ms-transform: translateY(340px,0);
    transition: all 0.5s;
}

.nav #close{
    position:absolute;
    top:35px;
    left:75px;
    width:20px;
    height:20px;
    background-size: 100% 100%;
    background-image:url(https://blacklist-rs.com/design/img/close.svg);
    background-repeat: no-repeat;
    cursor:pointer;
}

@media only screen and (max-width: 1280px) {
    .header #menu-icon{
        left: 35px;
        top: 46px;
        position: absolute;
        width: 30px;
        height: 30px;
        background-image:url(https://blacklist-rs.com/design/img/menu.svg);
        background-repeat: no-repeat;
        cursor:pointer;
    }   }

<div class="header">
  <div id="menu-icon"></div>
  <div class="logo"></div>        
  <div class="nav">
  <div class="nav-container">
    <div id="close"></div>
    <div class="main-menu">
      <ul class="menu">
        <li><a href="#home">Home</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#services">Services</a> </li>
        <li><a href="#contact">Contact</a> </li>
      </ul>
    </div>
  </div>
</div>

Answer 3

Managed to just use JQuery.

$('#bg-close').on('click', function() {
    
    let nav =  $('#nav-close');
    
    if(nav.attr('class') == 'nav-container nav-open'){
       nav.attr('class','nav-container');
    }
    
});