Проверял несколько раз, вроде бы с синтаксисом всё в порядке. Может, что-то не заметил.
$(document).ready(function() {
$('.header__burger').click(function(event) {
$('.header__burger, .header__menu').toggleClass('active');
});
});
/* Header */
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #ffffff;
}
.fullscreen {
min-height: 100vh;
display: flex;
align-items: center;
margin: 0px auto;
}
.container {
max-width: 1710px;
margin: 0px auto;
}
.header {
position: fixed;
background-color: #1abc9c;
width: 100%;
top: 0;
left: 0;
z-index: 50;
}
.header:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.header__body {
position: relative;
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}
.header__logo {
font-family: 'Open Sans';
@include adaptiv-font(25, 15);
font-weight: 800;
color: #ffffff;
flex: 0 0 100px;
position: relative;
z-index: 3;
}
.header__logo {
padding: 20px;
}
.header__logo img {
max-width: 100%;
display: block;
}
.header__burger {
display: none;
}
.header__list {
display: flex;
position: relative;
z-index: 2;
}
.header__list li {
list-style: none;
margin: 0px 30px 0px 60px;
}
.header__link {
font-family: 'Open Sans';
@include adaptiv-font(20, 15);
font-weight: 400;
color: #ffffff;
text-transform: uppercase;
}
.header__link:hover {
transition: width 0.3s ease-out;
font-weight: 700;
}
.header__link:after {
display: block;
left: 0;
/*изменить на right:0;, чтобы изменить направление подчёркивания */
width: 0;
/*задаём длинну линии до наведения курсора*/
height: 2px;
/*задаём ширину линии*/
background-color: #ffffff;
/*задаём цвет линии*/
content: "";
transition: width 0.3s ease-out;
/*задаём время анимации*/
}
.header__link:hover:after,
.header__link:focus:after {
width: 100%;
/*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}
@media (max-width: 767px) {
body.lock {
overflow: hidden;
}
.header__body {
height: 50px;
}
.header__logo {
flex: 0 0 40px;
}
.header__burger {
display: block;
position: relative;
width: 30px;
height: 20px;
z-index: 3;
}
.header__burger span {
position: absolute;
background-color: #fff;
left: 0;
width: 100%;
height: 2px;
top: 9px;
transition: all 0.3s ease 0s;
}
.header__burger:before,
.header__burger:after {
content: "";
background-color: #fff;
position: absolute;
width: 100%;
height: 2px;
left: 0;
transition: all 0.3s ease 0s;
}
.header__burger:before {
top: 0;
}
.header__burger:after {
bottom: 0;
}
.header__burger.active span {
transform: scale(0);
}
.header__burger.active:before {
transform: rotate(45deg);
top: 9px;
}
.header__burger.active:after {
transform: rotate(-45deg);
bottom: 9px;
}
.header__menu {
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
transition: all 0.3s ease 0s;
background-color: #18b5a4;
padding: 70px 10px 20px 10px;
}
.header__menu.active {
top: 0;
}
.header__list {
display: block;
}
.header__list li {
margin: 0px 0px 20px 0px;
}
.header__link {
font-size: 24px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper" id="header">
<div class="fullscreen">
<header class="header">
<div class='container'>
<div class="header__body">
<a href="#" class="header__logo">
<div>GK.</div>
</a>
<div class="header__burger">
<span></span>
</div>
<nav class="header__menu">
<ul class="header__list">
<li>
<a href="#home" class="header__link">Home</a>
</li>
<li>
<a href="#about" class="header__link">About</a>
</li>
<li>
<a href="#works" class="header__link">Team</a>
</li>
<li>
<a href="#service" class="header__link">Service</a>
</li>
<li>
<a href="#contact" class="header__link">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content">
<div class='container'>
</div>
</div>
</div>