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

JavaScript
1

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 surge.sh to better understand the issue

http://frail-lawyer.surge.sh

Thank you

2

Put it in your HTML before </body>

<script>
  const toggleInput = document.getElementById('toggle');

  document.querySelector('.menu').addEventListener('click', () => {
    if (toggleInput.checked) {
      toggleInput.checked = false;
    }
  })
</script>
3

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