How to close mobile menu when screen width changes?

Question

css

When the screen is reduced to a certain value, the main menu disappears and a button appears to activate the menu for mobile devices. If you click on it, the menu normally opens and closes. But if, without closing it, again increase the width of the screen and then reduce it, then when you reduce it again, the menu appears in the open.
How to make it so that when changing the width it is always closed until the button is clicked? And, tell me, are there any other ways besides this to implement such a menu without js and which ones (I don’t know scripts at all)?
https://jsfiddle.net/vut2y0j1/6/

Answer 1

You can see how it's done here https://codepen.io/erikterwan/pen/EVzeRP, also without JS. But here's how you can uncheck a checkbox by a media query without JS, nothing comes to mind ...
Here's how you can do it in JS:

const mq  = window.matchMedia("(max-width: 700px)");
const checkbox = document.querySelector('#burger-active');

window.addEventListener('resize', function(){
if(!mq.matches && checkbox.checked) {
  checkbox.checked = false;
}
});

Answer 2

Use media queries.