1.Разметка в html

<nav>

<button class="header__menu-btn burger-menu burger-menu-x">
<span>toggle menu</span>
</button>

<ul class="header__menu d-flex text-uppercase">
<li>
	<a href="#">Home</a>
</li>
<li>
	<a href="#">About</a>
</li>
<li>
	<a href="#">Services</a>
</li>
<li>
	<a href="#">Portfolio</a>
</li>
<li>
	<a href="#">Testimonials</a>
</li>
<li>
	<a href="#">Contact</a>
</li>
</ul>

</nav>

 2. Стили css

/*Бургер-меню*/
.header__menu-btn{
	display:none;
	cursor:pointer;
}
/*Дизайн кнопки бургера*/
.burger-menu {
  display: none;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 45px;
  height: 45px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.burger-menu:focus {
  outline: none;
}

.burger-menu span {
  display: block;
  position: absolute;
  top: 21px;
  left: 10px;
  right: 10px;
  height: 3px;
  width:26px;
  background: white;
}

.burger-menu span::before,
.burger-menu span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 26px;
  height: 3px;
  background-color: white;
  content: "";
}

.burger-menu span::before {
  top: 9px;
}

.burger-menu span::after {
  bottom: 9px;
}

.burger-menu-x {
  background-color: transparent;
}

.burger-menu-x span {
  transition: background 0s 0.3s;
}

.burger-menu-x span::before,
.burger-menu-x span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.burger-menu-x span::before {
  transition-property: top, transform;
}

.burger-menu-x span::after {
  transition-property: bottom, transform;
}

/* состояние active при открытом меню  */
.burger-menu-x.is-active {
  background-color: #cb0032;
}

.burger-menu-x.is-active span {
  background: none;
}

.burger-menu-x.is-active span::before {
  top: 1px;
  transform: rotate(45deg);
}

.burger-menu-x.is-active span::after {
  bottom: -1px;
  transform: rotate(-45deg);
}

.burger-menu-x.is-active span::before,
.burger-menu-x.is-active span::after {
  transition-delay: 0s, 0.3s;
}

3. Скрипты js

//Бургер-меню
$(document).ready(function() {
  var menuBtn = $('.header__menu-btn');
  var menu = $('.header__menu');

  menuBtn.on('click', function(event) {
   event.preventDefault();
   menu.toggleClass('header__menu__active');
 });

});
//Бургер-меню анимация
(function() {

  "use strict";

  var toggles = document.querySelectorAll(".burger-menu");

  for (var i = toggles.length - 1; i >= 0; i--) {
    var toggle = toggles[i];
    toggleHandler(toggle);
  };

  function toggleHandler(toggle) {
    toggle.addEventListener( "click", function(e) {
      e.preventDefault();
      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
    });
  }

})();
//---------

4. Медиа-запрос

@media (max-width: 767.98px) {

/*бургер-меню*/
	.header__menu li{
		display:none;
	}
	.header__menu-btn{
		display:block;
	}
	.header__menu{
		flex-direction:column;
	}
	.header__menu__active li{
		display:block;
		padding:13px;
	}
	/*---------*/
	/*красота бургер-меню*/
	.header__menu li a:hover{
		color:#fcac45;
	}
	.header__menu li a:after{
		display:none;
	}
/*-------------*/

}