Problems hiding the navi-toggle again (pure css)

Hello everyone, I have a problem with my navigation. Here is a Hamburg menu which opens a navigation. This opens through pure CSS. When I click on the navigation link, the link goes to the section but the navigation itself does not close. I got a .removeClass (“change”); read but don’t know exactly how to use it. Maybe it works without Javascript. Please help me. Many Thanks. best regards

html {
    font-size: 62.5%;
}
h2, .h2 {
    text-transform: uppercase;
}
body {
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
    padding: 3rem;
}
.heading-primary {
    color: #fff;
    text-transform: uppercase;
    backface-visibility: hidden;
    margin-bottom: 6rem;
}
.heading-primary--main {
    display: block;
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 3.5rem;
    margin-right: -3.5rem;
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}
.heading-primary--sub {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1.75rem;
    margin-right: -1.75rem;
    animation: moveInRight 1s ease-out;
}
.navigation__checkbox {
    display: none;
}
.navigation__checkbox:checked ~ .navigation__background {
    transform: scale(100);
}
.navigation__checkbox:checked ~ .navigation__nav {
    transform: translateX(0);
    visibility: initial;
    opacity: 1;
}
.navigation__button {
    position: fixed;
    top: 6rem;
    right: 6rem;
    width: 7rem;
    height: 7rem;
    background-color: #fff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 12;
    text-align: center;
}
.navigation__back {
    position: fixed;
    bottom: 6rem;
    right: 6rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 2;
    text-align: center;
}
.navigation__before {
    position: fixed;
    bottom: 6rem;
    left: 6rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 2;
    text-align: center;
}
.navigation__background {
    position: fixed;
    top: 6.5rem;
    right: 6.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: black;
    z-index: 10;
}
.navigation__nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 11;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.8s ease-in, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navigation__list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    list-style: none;
}
.navigation__link:link, .navigation__link:visited {
    display: inline-block;
    font-size: 3rem;
    font-weight: 300;
    padding: 1rem 2rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    background-size: 227%;
    transition: all 0.4s;
}
.navigation__link:hover, .navigation__link:active {
    color: #ddd;
}
.navigation__icon {
    display: inline-block;
    position: relative;
    width: 3rem;
    height: 0.5rem;
    top: 28%;
    transition: transform 0.25s ease-in-out;
}
.navigation__icon-span {
    position: absolute;
    height: 0.5rem;
    width: 50%;
    background: #777;
    transition: all 0.5s ease-in;
}
.navigation__icon-span:nth-child(even) {
    left: 50%;
    border-radius: 0 0.9rem 0.9rem 0;
}
.navigation__icon-span:nth-child(odd) {
    left: 0;
    border-radius: 0.9rem 0 0 0.9rem;
}
.navigation__icon-span:nth-child(1), .navigation__icon-span:nth-child(2) {
    transform: translateY(-1rem);
}
.navigation__icon-span:nth-child(5), .navigation__icon-span:nth-child(6) {
    transform: translateY(1rem);
}
.navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(1), .navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(6) {
    transform: rotate(45deg);
}
.navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(2), .navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(5) {
    transform: rotate(-45deg);
}
.navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(2), .navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(6) {
    transform-origin: left;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(1), .navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(5) {
    transform-origin: right;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(3) {
    left: -50%;
    opacity: 0;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon-span:nth-child(4) {
    left: 100%;
    opacity: 0;
}
.navigation__button:hover .navigation__icon-span:nth-child(3) {
    transform: translateX(-0.3rem) scale(1.1);
}
.navigation__button:hover .navigation__icon-span:nth-child(4) {
    transform: translateX(0.3rem) scale(1.1);
}
.navigation__checkbox:checked + .navigation__button:hover .navigation__icon {
    transform: rotate(180deg);
}
.header {
    background-image: black;
    height: 95vh;
    position: relative;
}
.header__text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
section {
    height: 100vh;
    padding: 40vh;
    color: #fff;
}
section h2 {
    font-size: 3em;
}
section:nth-child(1) {
    background: darkred;
}
section:nth-child(2) {
    background: darkgrey;
}
section:nth-child(3) {
    background: darkred;
}

<div class="navigation">
  <input type="checkbox" id="navi-toggle" class="navigation__checkbox" />
  <label for="navi-toggle" class="navigation__button"> <span class="navigation__icon"> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> </span> </label>
  <div class="navigation__background">&nbsp;</div>
  <nav class="navigation__nav">
    <ul class="navigation__list">
      <li class="navigation__item"> <a href="#box1" class="navigation__link">Navigation</a> </li>
      <li class="navigation__item"> <a href="#box2" class="navigation__link">Navigation</a> </li>
    </ul>
  </nav>
</div>
<section id="box1" class="header">
  <div class="header__text-box">
    <h1 class="heading-primary"> <span class="heading-primary--main">Heading</span> <span class="heading-primary--sub">Lorem ipsum</span> </h1>
  </div>
</section>
<section id="box2" >
  <h2 class="animation-element slide-left">Section</h2>
  <p class="animation-element slide-left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</section>

Answer

You cant’t without using javascript since you don’t click on the input

let checkbox = document.getElementById("navi-toggle");
const navItems = document.querySelectorAll(".navigation__item");

navItems.forEach(e => e.addEventListener('click', function() {
  checkbox.checked = false
}))

html {
  font-size: 62.5%;
}

h2,
.h2 {
  text-transform: uppercase;
}

body {
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #777;
  padding: 3rem;
}

.heading-primary {
  color: #fff;
  text-transform: uppercase;
  backface-visibility: hidden;
  margin-bottom: 6rem;
}

.heading-primary--main {
  display: block;
  font-size: 6rem;
  font-weight: 400;
  letter-spacing: 3.5rem;
  margin-right: -3.5rem;
  animation-name: moveInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

.heading-primary--sub {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1.75rem;
  margin-right: -1.75rem;
  animation: moveInRight 1s ease-out;
}

.navigation__checkbox {
  display: none;
}

.navigation__checkbox:checked~.navigation__background {
  transform: scale(100);
}

.navigation__checkbox:checked~.navigation__nav {
  transform: translateX(0);
  visibility: initial;
  opacity: 1;
}

.navigation__button {
  position: fixed;
  top: 6rem;
  right: 6rem;
  width: 7rem;
  height: 7rem;
  background-color: #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 12;
  text-align: center;
}

.navigation__back {
  position: fixed;
  bottom: 6rem;
  right: 6rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 2;
  text-align: center;
}

.navigation__before {
  position: fixed;
  bottom: 6rem;
  left: 6rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 2;
  text-align: center;
}

.navigation__background {
  position: fixed;
  top: 6.5rem;
  right: 6.5rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: black;
  z-index: 10;
}

.navigation__nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 11;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.8s ease-in, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  list-style: none;
}

.navigation__link:link,
.navigation__link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-size: 227%;
  transition: all 0.4s;
}

.navigation__link:hover,
.navigation__link:active {
  color: #ddd;
}

.navigation__icon {
  display: inline-block;
  position: relative;
  width: 3rem;
  height: 0.5rem;
  top: 28%;
  transition: transform 0.25s ease-in-out;
}

.navigation__icon-span {
  position: absolute;
  height: 0.5rem;
  width: 50%;
  background: #777;
  transition: all 0.5s ease-in;
}

.navigation__icon-span:nth-child(even) {
  left: 50%;
  border-radius: 0 0.9rem 0.9rem 0;
}

.navigation__icon-span:nth-child(odd) {
  left: 0;
  border-radius: 0.9rem 0 0 0.9rem;
}

.navigation__icon-span:nth-child(1),
.navigation__icon-span:nth-child(2) {
  transform: translateY(-1rem);
}

.navigation__icon-span:nth-child(5),
.navigation__icon-span:nth-child(6) {
  transform: translateY(1rem);
}

.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(1),
.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(6) {
  transform: rotate(45deg);
}

.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(2),
.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(5) {
  transform: rotate(-45deg);
}

.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(2),
.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(6) {
  transform-origin: left;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(1),
.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(5) {
  transform-origin: right;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon-span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

.navigation__button:hover .navigation__icon-span:nth-child(3) {
  transform: translateX(-0.3rem) scale(1.1);
}

.navigation__button:hover .navigation__icon-span:nth-child(4) {
  transform: translateX(0.3rem) scale(1.1);
}

.navigation__checkbox:checked+.navigation__button:hover .navigation__icon {
  transform: rotate(180deg);
}

.header {
  background-image: black;
  height: 95vh;
  position: relative;
}

.header__text-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

section {
  height: 100vh;
  padding: 40vh;
  color: #fff;
}

section h2 {
  font-size: 3em;
}

section:nth-child(1) {
  background: darkred;
}

section:nth-child(2) {
  background: darkgrey;
}

section:nth-child(3) {
  background: darkred;
}

<div class="navigation">
  <input type="checkbox" id="navi-toggle" class="navigation__checkbox" />
  <label for="navi-toggle" class="navigation__button"> <span class="navigation__icon"> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> <span class="navigation__icon-span">&nbsp;</span> </span> </label>
  <div class="navigation__background">&nbsp;</div>
  <nav class="navigation__nav">
    <ul class="navigation__list">
      <li class="navigation__item"> <a href="#box1" class="navigation__link">Navigation</a> </li>
      <li class="navigation__item"> <a href="#box2" class="navigation__link">Navigation</a> </li>
    </ul>
  </nav>
</div>
<section id="box1" class="header">
  <div class="header__text-box">
    <h1 class="heading-primary"> <span class="heading-primary--main">Heading</span> <span class="heading-primary--sub">Lorem ipsum</span> </h1>
  </div>
</section>
<section id="box2">
  <h2 class="animation-element slide-left">Section</h2>
  <p class="animation-element slide-left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</section>