Как скрыть меню бургер на чистом CSS?

Question

[Soho]

Меню бургер в мобильной версии на чистом CSS, закрывается только если нажать на крестик, меню содержат якорные ссылки на эту же страницу при нажатии на ссылку меню остаётся открытым, как сделать чтобы оно скрывалось при нажатии на якорь, без js

<header class="header fixed-top navbar-light">
    <div class="logo"><a href="" class="navbar-brand">Лого</a></div>
    <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
    <ul class="menu navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#1">Пункт1</a></li>
      <li class="nav-item"><a class="nav-link" href="#2">Пункт2</a></li>
      <li class="nav-item"><a class="nav-link" href="#3">Пункт3</a></li>
      <li class="nav-item"><a class="nav-link" href="#4">Пункт4</a></li>
    </ul>
  </header>

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}



.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

Answer 1

[Froggyweb]

Никак :) не стоит извращаться, там где не надо

Comments

[Soho]

А если как?

[Froggyweb]

снять чекбокс с помощью js :)

[Soho]

Froggyweb, а если так https://codepen.io/ljc-dev/pen/NWxJezy то как?))

Answer 2

[Александр Варлаков]

Вместо, checked используй псевдокласс :focus Только кнопку "крестик" - надо сделать другим элементом, чтобы фокус терялся, думаю сам справишься

Comments

[Soho]

Что ты имел ввиду другим элементом? кручу, ничего не выходит

[Александр Варлаков]

Soho, ну на "закрыть" я поставил букву х(икс), чтобы не делать div c псевдоэлементами изображающими крестик как у тебя