Как настроить меню (header) под задачи при скроле и адаптиве?

Question

[boul]

Решаю задачку:
1) При открытии страницы header выглядит как обычное горизонтальное меню. Но при скроле, это меню превращается в бургер меню.
2) При уменьшении ширины экрана меню превращается в бургер меню, но при этом лого не должно исчезать.
Вот текущий код:
HTML:

<header class="header">
  <div class="header_container _container">
    <a href="#"><img class="logo" src="img/logo.jpg"></a>
    <nav class="header_menu menu">
      <ul class="menu_list">
        <li class="menu-item"><a  href="#" class="menu_link">Home</a></li>
        <li class="menu-item"><a  href="#" class="menu_link">About us</a></li>
        <li class="menu-item"><a  href="#" class="menu_link">Blog</a></li>
        <li class="menu-item"><a  href="#" class="menu_link">Articles</a></li>
        <li class="menu-item"><a  href="#" class="menu_link">Contacts</a></li>
      </ul>
    </nav>
    <!-- бургер меню -->
    <div class="burger-menu">
      <input id="menu-toggle" type="checkbox" />
      <label class="menu-btn" for="menu-toggle">
        <span></span>
      </label>

      <ul class="menubox">
        <li><a class="menu-item" href="#">Home</a></li>
        <li><a class="menu-item" href="#">About us</a></li>
        <li><a class="menu-item" href="#">Blog</a></li>
        <li><a class="menu-item" href="#">Articles</a></li>
        <li><a class="menu-item" href="#">Contacts</a></li>
      </ul>
    </div>
  </div>
</header>

CSS:

.header {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 50;
}

.header_container {
  display: flex;
  min-height: 104px;
  align-items: center;
}
.logo {
  width: 225px;
  margin-left: 14px;
}
.header_menu {
  margin: 0px 0px 0px 133px;
}
.menu {
}
.menu_list {
  flex-wrap: wrap;
  display: flex;
  position: relative;
  left: 30%;
}
.menu_item {

}
.menu-item:not(:last-child) {
  margin: 0px 21px 0px 0px;
}

.menu_link {
  color:#737373;
  font-weight: 600;
  line-height: calc(24 / 14 * 100%);

}

// Конец основного меню

// Меню БУРГЕР
  
  .menu-btn{
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right:0;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;
  }
   
  .menu-btn > span,
  .menu-btn > span::before,
  .menu-btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #616161;
    transition-duration: .25s;
  }
  .menu-btn > span::before {
    content: '';
    top: -8px;
  }
  .menu-btn > span::after {
    content: '';
    top: 8px;
  }

  .menubox{
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
    transition-duration: .25s;
  }

  .menu-item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
  }
  .menu-item:hover {
    background-color: #CFD8DC;
  }

  #menu-toggle{
    opacity: 0;
  }

  #menu-toggle:checked ~ .menu-btn > span{
    transform: rotate(45deg);
  }
  #menu-toggle:checked ~ .menu-btn > span::before{
    top: 0;
    transform: rotate(0);
  }
  #menu-toggle:checked ~ .menu-btn > span::after{
    top: 0;
    transform: rotate(90deg);
  }
  #menu-toggle:checked ~ .menubox{
    visibility: visible;
    left: 0;
  }

ссылка на codepen:
https://codepen.io/boulingist81/pen/yLoRJoe?editor...

Comments

[xdevelx]

Для начала отказаться от input для переключения меню и начать писать js код для подобных задач, если нужна полноценная реализация.

[boul]

xdevelx, Спасибо за комментарий.
Если возможно, предложите пожалуйста решение, я в JS совсем не силен.
И почему стоит отказаться от input?
Спасибо.

[xdevelx]

boul, Предлагаете за вас сделать то, что сами не можете? Видимо ресурсом ошиблись. Пишите свое решение и если возникнут вопросы по ходу реализации, задавайте.

[Николай Шабалин]

от <input> нужно отказаться потому что его основная задача отправлять данные на сервер. Поэтому вы уже не правильным путём идёте.

Декомпозируйте свою задачу:
1. научиться определять, что сайт проскролился, а не находится в самом начале. JS
2. если сайт проскролился, то вещать класс на нужный вам элемент, если сайт в самом начале, то удалять этот повешенный класс. JS
3. если класс есть, то изменять размер элемента, если класса нет, то возвращать обратно - это уже можно с помощью CSS делать.