<header class="header">
  <div class="logo">
    <a href="/">
      <img src="logo.svg" width="40" height="40">
    </a>
  </div>
  
  <nav class="nav">
    <ul>
      <li class="nav__item">
        <a href="/products/">Продукция</a>
      </li>
      <li class="nav__item">
        <a href="/services/">Услуги</a>
      </li>
      <li class="nav__item is__active">
        <a href="/blog/">Блог</a>
      </li>
      <li class="nav__item">
        <a href="/contacts/">Контакты</a>
      </li>
      <li class="nav__item">
        <a href="tel:+74954005050">+7 495 400‑50‑50</a>
      </li>
    </ul>
  </nav>
  
  <div class="tel">
    <a href="tel:+74954005050">
      +7 495 400‑50‑50
    </a>
  </div>

  <!-- aria-label подскажет смысл кнопки программам чтения с экрана -->
  <button class="hamburger" type="button" aria-label="Открыть меню">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
  </button>
</header>

@media (width > 690px) {
  .header .hamburger {
    display: none;
  }
}

@media (width <= 690px) {
  .header {
    position: relative; /* Задаём контекст для позиционирования меню */
    grid-template-columns: min-content 1fr 1fr min-content; /* Определяем четыре колонки: первую и последнюю — по ширине логотипа и кнопки, вторую и третью — 50% от оставшегося места */
  }

  .header .hamburger {
    grid-column: 4; /* Кнопку ставим в последнюю колонку */
  }

  .header .tel {
    grid-column: 2 / span 2; /* Телефону отдаём две центральные колонки */
    justify-self: stretch;
  }

  .nav {
    position: absolute; /* Меню позиционируем абсолютно, сразу после шапки поверх содержимого. Из-за этого кнопка перестанет нажиматься, исправим это на следующем шаге */
    top: 0;
    left: 0;
    width: 100%; /* Растягиваем меню на всю ширину экрана */
    padding: 65px 10px 20px; /* Добавляем настолько большой верхний падинг, чтобы меню встало точно под шапкой */
  }

  .nav ul {
    grid-auto-flow: row; /* Раскладываем меню рядами */
    grid-auto-rows: max-content;
    row-gap: 10px;
  }
}

<link rel="stylesheet" src="styles/hamburgers.css">

<header class="header">
  <div class="logo">
    <a href="/">
      <img src="logo.svg" width="40" height="40">
    </a>
  </div>
  
  <nav class="nav">
    <ul>
      <li class="nav__item">
        <a href="/products/">Продукция</a>
      </li>
      <li class="nav__item">
        <a href="/services/">Услуги</a>
      </li>
      <li class="nav__item is__active">
        <a href="/blog/">Блог</a>
      </li>
      <li class="nav__item">
        <a href="/contacts/">Контакты</a>
      </li>
      <li class="nav__item">
        <a href="tel:+74954005050">+7 495 400‑50‑50</a>
      </li>
    </ul>
  </nav>
  
  <div class="tel">
    <a href="tel:+74954005050">
      +7 495 400‑50‑50
    </a>
  </div>

  <button class="hamburger hamburger--squeeze" type="button" aria-label="Открыть меню">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
  </button>
</header>

.header .hamburger {
  grid-column: 4;
  grid-row: 1;
  color: inherit; /* Чтобы иконка унаследовала цвет текста, а не была белой */
  line-height: 0; /* Чтобы иконка не увеличивала высоту меню */
  padding: 0;
}

.header .hamburger-inner,
.header .hamburger-inner::before,
.header .hamburger-inner::after {
  border-radius: 0; /* Убираем скругления в гамбургере */
}

<script>
  document
    .querySelectorAll('.hamburger') // Находим кнопку-гамбургер
    .forEach(button => {
     const nav = button
      .closest('.header')
      .querySelector('.nav') // Находим ближайшее к кнопке меню

     button.addEventListener('click', () => { // По клику на кнопку добавляем или удаляем класс is-active у кнопки и меню
       button
         .classList
         .toggle('is-active')

       nav
        .classList
        .toggle('is-active')
     })
  })
</script>

 @media (width > 690px) {
   .header .hamburger {
     display: none;
   }
 }

 @media (width <= 690px) {
   .header {
     position: relative;
     grid-template-columns: min-content 1fr 1fr min-content;
   }
   
   .header .hamburger {
     grid-column: 4;
     grid-row: 1;
   }
   
   .header .tel {
     grid-column: 2 / span 2;
     grid-row: 1;
     justify-self: stretch;
   }

   .nav {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     padding: 65px 10px 20px;
     transform: translateY(-100%); /* Прячем меню за верхнюю границу экрана */
     transition: transform 75ms ease; /* Анимируем изменение позиции меню, синхронизировав с анимацией кнопки */
     transition-delay: 120ms;
   }

   .nav.is-active {
     transform: translateY(0); /* Когда меню активно, ставим его под шапку */
     transition-timing-function: cubic-bezier(.215, .61, .355, 1);
   }

   .nav ul {
     grid-auto-flow: row;
     grid-auto-rows: max-content;
     row-gap: 10px;
   }
}

 @media (width > 690px) {
   .header .hamburger {
     display: none;
   }
 }

 @media (width <= 690px) {
   .header {
     position: relative;
     grid-template-columns: min-content 1fr 1fr min-content;
   }
   
   .header .hamburger {
     grid-column: 4;
     grid-row: 1;
   }
   
   .header .tel {
     grid-column: 2 / span 2;
     grid-row: 1;
     justify-self: stretch;
   }

   .nav {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     padding: 65px 10px 20px;
     transform: translateY(calc(60px - 100%)); /* Спрячем меню под слой-разделитель */
     z-index: 1; /* Меню поедет на самом нижнем уровне */
     transition: transform 75ms ease;
     transition-delay: 120ms;
   }
  
  .nav.is-active {
    transform: translateY(0);
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  
  .nav ul {
     grid-auto-flow: row;
     grid-auto-rows: max-content;
     row-gap: 10px;
   }

  .header::before {
    content: '';
    background: inherit;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2; /* Слой-разделитель скроет меню, пока оно проезжает под шапкой */
  }

  .header .logo,
  .header .tel,
  .header .hamburger {
    position: relative;
    z-index: 3; /* Логотип, телефон и кнопка встанут на самом верху */
  }
}