Is there a way to toggle a checkbox input with another element with CSS?

Question

I made a pure CSS hamburger menu for the mobile version of my website, which would have been perfect, however, it is a one-page website and all of the links on the menu are ids of other sections on the page. Since the page doesn't refresh or open another page, the menu doesn't close. Does anyone know a way to make the menu close with CSS or even Javascript? I've exhausted all of my resources.

<input type="checkbox" class="burger-toggle" id="burger-toggle">
<label for="burger-toggle" class="burger" id="burger-toggle">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</label>
  <nav class="nav" id="nav">
    <ul class="menu" id="menu">
      <li><a href="#work">Work</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

</header>

CSS

    #burger-toggle:checked ~ nav {
    width: fit-content;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

Answer 1

You can probably do it like this.

document.querySelector('#menu a').addEventListener('click', closeHamburger);

function closeHamburger() {
  document.querySelector('#burger-toggle').checked = false;
}

But remember to set aria-hidden="true" when you misuse (out of purpose) form elements.

Answer 2

I agree with @BOZ, but I don't think that using an input is the right way for a hamburger menu.

Then it should appear only for the mobile, so let's say width 768px

you can also use 2 separate nav one for mobile and the other for big screen and play with display: none; or visibility: hidden;

And use a css class to change the behavior of your navigation in this example the class isopen

 var burger = document.querySelector(".burger"); var nav = document.querySelector(".nav"); var close = document.querySelector(".close"); var screenSize = document.querySelector(".screen__size"); burger.addEventListener("click", function () { nav.classList.add("isopen"); }); close.addEventListener("click", function () { nav.classList.remove("isopen"); }); //This is just for pixel width display window.addEventListener("resize", function () { screenSize.innerHTML = window.innerWidth + "px"; }); window.onload = function () { screenSize.innerHTML = window.innerWidth + "px"; };

 body { display: flex; justify-content: center; align-items: center; font-family: Arial, Helvetica, sans-serif; } header { width: 100%; max-width: 1440px; padding: 0 1rem; height: 60px; margin: 0 auto; display: flex; align-items: center; }.nav { margin-left: auto; transition: transform 0.4s ease; }.menu { display: flex; align-items: center; justify-content: center; list-style: none; text-transform: uppercase; font-size: 1.2rem; }.menu li:not(:last-child) { margin-right: 1rem; } button { background: none; outline: none; border: none; cursor: pointer; }.burger { position: absolute; width: 20px; height: 15px; margin-right: auto; visibility: hidden; }.bar { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: black; }.bar:nth-child(2) { top: 50%; left: 50%; transform: translate(-50%, -50%); }.bar:last-child { top: inherit; bottom: 0; }.nav.isopen { transform: translateY(0); }.close { position: absolute; top: 30px; right: 30px; font-size: 2.2rem; visibility: hidden; }.screen__size { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1rem; font-weight: 500; } @media screen and (max-width: 768px) {.burger, .close { visibility: visible; }.nav { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 2; background-color: lightblue; transform: translateY(-100%); }.nav ul { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; list-style-type: none; }.nav li:not(:last-child) { margin-bottom: 1rem; } }

 <header> <button class="burger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> <nav class="nav"> <button class="close">X</button> <ul class="menu"> <li><a href="#work">Work</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <div class="screen__size"></div>