Auto-collapse hamburger menu on Anchor click (no bootstrap)

Hello, I am building my first full website. Everything is going very smoothly except for my nav-bar on mobile screens. When you click one of the anchors, say to move to the #about-section, the menu does not auto-collapse after click. The page moves to the about section and everything, but the menu is still hanging down, covering the content. I understand it is a javascript thing, but i have not begun to learn javascript yet and every single thing I look up is using a bootstrap nav-bar which I am not. Could someone help me fix this problem? Here is a codepen of my nav-bar:

here is a link to my working site so far on to better understand the issue

Thank you

Put it in your HTML before </body>

  const toggleInput = document.getElementById('toggle');

  document.querySelector('.menu').addEventListener('click', () => {
    if (toggleInput.checked) {
      toggleInput.checked = false;

That works perfectly! Thank you very much Jenovs. I am beginning my Javascript journey next week and I cannot wait to have the same knowledge as someone like yourself. Cheers