Contraer el encabezado móvil cuando se hace clic en otro lugar de la página

Actualmente estoy trabajando con un encabezado realmente básico (eventualmente quiero que se anime cuando se abre y se colapsa y tengo el menú de hamburguesas animado hacia / desde el ícono de cierre). El encabezado responde y el usuario puede contraerlo al tocar el icono de cierre. ¿Cómo puedo hacer que se colapse cada vez que se toca un lugar que no sea el encabezado?

Esto es con lo que estoy trabajando hasta ahora.

body, html { max-width: 100%; padding: 0vw; margin: 0vw; } .header { background-color: #ffffff; position: fixed; top: 0%; left: 0%; right: 0%; height: 10vh; z-index: 1; border-bottom: solid; display: flex; justify-content: space-between; } .headerfill { height: 10vh; border: none; } .header-container { width: 100%; height: auto; display: flex; flex-flow: row nowrap; justify-content: center; margin: auto; margin-left: auto; margin-right: auto; } .logo-container { float: left; width: 40%; padding-left: 1vh; display: flex; flex-flow: row nowrap; justify-content: left; } .navigation-container { width: 60%; display: flex; flex-flow: row nowrap; //justify-content: space-evenly; margin: auto; margin-left: auto; margin-right: auto; text-align: center; } .space-evenly { justify-content: space-evenly; } @media only screen and (max-width: 500px) { .logo-container { float: left; width: 80%; padding-left: 1vh; display: flex; flex-flow: row nowrap; justify-content: left; } } @media only screen and (max-width: 500px) { .navigation-container { width: 20%; display: flex; flex-flow: row nowrap; //justify-content: space-evenly; margin: auto; margin-left: auto; margin-right: auto; text-align: center; } .space-evenly { justify-content: space-evenly; } } .logo { height: 8vh; max-width: 40%; padding-top: 1.5vh; padding-bottom: 0.5vh; padding-left: 4vh; display: block; object-fit: contain; } @media only screen and (max-width: 500px) { .logo { height: 8vh; max-width: 80%; padding-top: 1.5vh; padding-bottom: 0.5vh; padding-left: 2vh; display: block; object-fit: contain; } } img { -webkit-user-drag: none; } .nav { font-family: 'Roboto', serif; font-size: 2vw; text-align: center; margin-top: auto; margin-bottom: auto; color: #000000; padding-left: auto; padding-right: auto; line-height: 1em; object-fit: contain; text-decoration: none; } @media only screen and (max-width: 500px) { .nav { font-family: 'Roboto', serif; font-size: 8vw; text-align: left; margin-top: 2vh; margin-bottom: auto; color: #000000; padding-left: 2vh; padding-right: 2vh; line-height: 1em; object-fit: contain; text-decoration: none; } } .nav:hover { color: #096e67; } a:link { color: #000000; text-decoration: none; } h1 { font-family: 'Roboto', serif; font-size: 4vw; text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; padding-left: 4vh; padding-right: 2vh; padding-bottom: 0.5vh; line-height: 1em; } @media only screen and (max-width: 500px) { h1 { font-family: 'Roboto', serif; font-size: 8vw; text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; padding-left: 2vh; padding-right: 2vh; padding-bottom: 0.5vh; line-height: 1em; } } nav { display: flex; width: 100%; justify-content: space-evenly; margin-right: auto; text-align: right; } nav a { display: block; } i { display: none !important; } @media (max-width: 500px) { nav { position: absolute; top: 100%; left: 0; right: 0; display: none; } nav.active { display: block; background-color: aqua; border-top: solid; border-bottom: green solid 0.2vh; padding: 1vh; padding-bottom: 2vh; } i { display: block!important; margin: 5px; } } .fa { font-size: 6vh; padding-top: 2vh; padding-bottom: 2vh; padding: 0vh; } 
    Website Header       
menu = document.querySelector('nav'); document.querySelector('i') .addEventListener('click', e => { menu.classList.toggle('active') document.querySelector('header i').classList.toggle('fa-bars') document.querySelector('header i').classList.toggle('fa-times') })

Hay bastante Simplemente me gustaría, así que si el usuario decide tocar en otro lugar, no tiene que hacer clic en el botón de cerrar en caso de que decidan quedarse con esa página.

Bonificación si alguien puede descubrir cómo agregar bootstrap para la expansión y el colapso del encabezado (en la vista móvil) y para animar el menú de cierre / hamburguesa.

Bastante atascado, gracias de antemano.

prueba esto

 $(document).click(function() { $("nav").removeClass("active") }) $("nav").click(function(e) { e.stopPropagation() return false }) $(".fa.fa-bars").click(function(e) { e.stopPropagation() $("nav").toggleClass("active") }) 

Esto debería resolver tu problema. Déjame saber el resultado.

 let button =document.querySelector('body').addEventListener('click', buttonClick); function buttonClick(e) { //to view current target on console console.log(e.target); //checks if you've clicked out side the nav if(!e.target.classList.contains('navigation-container')) { //checks if nav is open if(document.querySelector('nav').classList.contains('active')) { console.log('now closing nav'); //from your code this should close the nav but adjust to close the nav if this dose not work menu.classList.toggle('active') document.querySelector('header i').classList.toggle('fa-bars') document.querySelector('header i').classList.toggle('fa-times') } } }