Решаю задачку:
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... 
Простой
