<header class="header_body">

  <div class="container">

    <div class="header">

      <a href="#" class="logo">
        <img src="libs/img/sps-logo.svg" alt="">
      </a>

      <div class="burger_menu">

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="16" viewBox="0 0 20 16">
          <image id="menu" width="20" height="16" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAP0lEQVQ4jWOUUEr+z0BFwMLAwPCR2gYKUNNAJmoaNkINBEUKVZMNTVzISE0DR5MN5QAUKR+obSA/1UxjYGAAAL1LBMg8tVD+AAAAAElFTkSuQmCC"/>
        </svg>

      </div>

      <nav class="nav">

        <ul>

          <li class="nav_list">Услуги</li>
          <li class="nav_list">Специалисты</li>
          <li class="nav_list">Работы</li>
          <li class="nav_list">Документы</li>
          <li class="nav_list">Новости</li>
          <li class="nav_list">Контакты</li>

          <button class="btn-close">Закрыть</button>

        </ul>

      </nav>


    </div>

  </div>

</header>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

body{
  margin: 0;
  padding: 0;
}

.container{
    width: 100%;
    max-width: 1170px;
    padding: 0 10px;
    margin: 0 auto;
}
.header_body{
    width: 100%;
    height: 80px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
}

.header-banner_content{
    display: flex;
    flex-direction: column;
}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

a.logo{
    width: 243px;
    height: 50px;
}

.nav {
    width: 65%;
}
.nav ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li.nav_list{
    font-size: 16px;
    font-family: 'Gilroy-Medium';
    color: #212121;
    list-style: none;
    cursor: pointer;
    position: relative;
}

li.nav_list:hover{
    color: #182263;
}

li.nav_list::after{
    content: '';
    height: 2px;
    width: 0;
    background-color: #182263;
    bottom: -3px;
    left: 0;
    transition: .3s;
    position: absolute;
}
li.nav_list:hover::after{
    width: 100%;
}

.burger_menu{
    display: none;
}

.btn-close{
    display: none;
}

@media (max-width: 860px){
  .burger_menu{
    display: block;   
    cursor: pointer;
  }

  nav{
    display: none;
  }


  .header.active{
    position: fixed;
  }

  .header_banner{
    background: url('../libs/img/slider1/bg11.png') no-repeat center;
  }

  .nav.active{
    position: fixed;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: #f5f5f5;
    left: 0;
    top: 80px;
    z-index: 15;
    background: #f5f5f5 url('../libs/img/lines.svg') no-repeat bottom center;
    display: flex;
  }

  .header_body.active{
    background-color: #f5f5f5;
  }

  body.active{
    overflow-y: hidden;
  }

  .nav ul.active{
    display: flex;
    height: 265px;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 40px;
  }

  li.nav_list.active{
    padding-bottom: 30px;
    padding-left: 40px;
  }

  li.nav_list:hover.active{
    font-family: 'Gilroy-Bold';
  }

  li.nav_list:last-child.active{
    padding-bottom: 0;
  }

  .btn-close.active{
    display: block;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #b3b3b3;
    height: 44px;
    width: 290px;
    position: absolute;
    bottom: 50px;
    z-index: 20;
    font-family: 'Gilroy-Medium';
    font-size: 14px;
    text-transform: uppercase;
    color: #616161;
  }

  .btn-close:hover.active{

  }

  .header.active{
    position: sticky;
    z-index: 16;
  }
}
let menuValid = false;

document.querySelector('.burger_menu').addEventListener('click', () => {
	if(menuValid == false){
		$('.burger_menu').addClass('active');
		$('.header').addClass('active');
		$('.nav').addClass('active');
		$('.header_body').addClass('active');
		$('body').addClass('active');
		$('.nav ul').addClass('active');
		$('.btn-close').addClass('active');
		menuValid = true;
	} else {
		$('.burger_menu').removeClass('active');
		$('.header').removeClass('active');
		$('.nav').removeClass('active');
		$('.header_body').removeClass('active');
		$('body').removeClass('active');
		$('.nav ul').removeClass('active');
		$('.btn-close').removeClass('active');
		menuValid = false;
	}
	
})

document.querySelector('.btn-close').addEventListener('click', () => {
	$('.burger_menu').removeClass('active');
	$('.header').removeClass('active');
	$('.nav').removeClass('active');
	$('.header_body').removeClass('active');
	$('body').removeClass('active');
	$('.nav ul').removeClass('active');
	$('.btn-close').removeClass('active');
	menuValid = false;
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.