Simple adaptive header menu

main.sass

.logo
	display: block
	max-width: 135px

.header
	// styles wrapper
		
.header__inner
	height: 75px
	display: flex
	justify-content: space-between
	align-items: center
	padding: 10px 0

.main-menu
	display: flex
	list-style: none
	padding: 0
	margin: 0
	font-size: 18px
	// font-family: 'montserrat-f', sans-serif
	li
		margin-left: 45px
		line-height: 1.1
	a
		color: $accent
		&:hover
			color: $accent

.burger-menu
	display: none
	background: transparent
	border: none
	padding: 5px
	flex-direction: column
	justify-content: space-between
	height: 33px
	width: 40px
	cursor: pointer
	span
		display: block
		background: $accent
		height: 5px
		width: 30px
		border-radius: 2px
	&:focus
		outline: none

media.sass

// ≥1200px
@media screen and ( max-width: 1200px )
  .header__inner
    height: 70px

  .header
	  // wrapper styles

@media screen and ( max-width: 1200px )
  .main-menu li
    margin-left: 35px

// ≥992px
@media screen and ( max-width: 992px )
  .header__inner
    height: 60px

  // другие дубликаты меню
  .main-menu
    display: none

  .burger-menu
    display: flex

  // Черный фон при открытии
  .background-ovelay-menu
    position: fixed
    top: 0
    bottom: 0
    height: 100vh
    left: 0
    right: 0
    background: rgba(0, 0, 0, 0.5)
    z-index: 1000
    visibility: hidden
    opacity: 0
    transition: all 0.25s ease
    &.show
      visibility: visible
      opacity: 1

  // меню которое будет выпадать
  .main-menu.main-menu--mobile-fixed
    display: flex
    position: fixed    
    flex-direction: column
    background: #fff
    left: 0
    bottom: 0
    top: 0
    max-width: 290px
    width: 100%
    padding: 40px 0
    transition: transform .3s ease
    transform: translateX(-100%)
    z-index: 1000
    li
      margin: 0
      border-bottom: 1px solid #dbdbdb
      &:first-child
        border-top: 1px solid #dbdbdb
    a
      padding: 10px 30px
      display: block
      transition: background .25s ease
      &:hover
        background: #dbdbdb
        text-decoration: none
    &.open
      transform: translateX(0)
      box-shadow: 3px 0px 8px 0px rgba(0, 0, 0, .3)

  .header
    // wrapper styles

// ≥576px
@media screen and ( max-width: 576px )
  .main-menu.main-menu--mobile-fixed
    max-width: 250px

scripts.js

function slowScroll(id) {
  if (!$(id).length) {
    return
  }

  var offset = 0
  $('html, body').animate(
    {
      scrollTop: $(id).offset().top - offset,
    },
    500
  )
  return false
}

$(function () {
  $('.burger-menu, .background-ovelay-menu').click(function () {
    $('.main-menu.main-menu--mobile-fixed').toggleClass('open')
    $('.background-ovelay-menu').toggleClass('show')
  })
  $('.main-menu--mobile-fixed a').click(function (e) {
    e.preventDefault()
    $(this).closest('.main-menu--mobile-fixed').removeClass('open')
    $('.background-ovelay-menu').removeClass('show')
    slowScroll($(this).attr('href'))
  })
})

template.html

<header class="header">
  <div class="background-ovelay-menu"></div>
  <div class="container">
    <div class="header__inner">
      <a href="#"
         class="logo">
        <img src="img/logo.png"
             alt="Logotype"
             class="img-responsive">
      </a>

      <nav>
        <ul class="main-menu main-menu--mobile-fixed">
          <li><a href="#number_1">Пункт 1</a></li>
          <li><a href="#number_2">Пункт 2</a></li>
          <li><a href="#number_3">Пункт 3</a></li>
        </ul>
      </nav>

      <button class="burger-menu">
        <span></span>
        <span></span>
        <span></span>
      </button>

    </div>
  </div>
</header>