var headerList = document.querySelector('.header-list');
var bt = document.querySelector('.fa-bar');
bt.addEventListener('click', function(){
headerList.classList.toggle('bta');
});
.header-list {
list-style-type: none;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end; }
.header-list__item {
margin-left: 40px; }
.header-list:first-child {
margin-left: 0; }
.header-list__link {
color: #292929;
font-family: "Montserrat";
font-size: 14px;
font-weight: 600;
text-transform: uppercase; }
.header-list__link:hover {
color: #eb5074;
text-decoration: none; }
.bt {
background-color: transparent;
border: transparent;
position: absolute;
left: -webkit-calc(50% - 13px);
left: calc(50% - 13px);
top: 0;
width: 30px;
height: 30px;
display: none; }
.bta {
display: block; }
<header class="header">
<div class="container">
<div class="row align-items-baseline lini no-gutters">
<div class="col-lg-2 col-md-12">
<div class="logo">
<img src="img/logo.png" alt="">
</div>
</div>
<div class="col-lg-10 col-md-12">
<ul class="header-list">
<li class="header-list__item"><a href="#" class="header-list__link">главная</a></li>
<li class="header-list__item"><a href="#" class="header-list__link">о производителе</a></li>
<li class="header-list__item"><a href="#" class="header-list__link">продукты</a></li>
<li class="header-list__item"><a href="#" class="header-list__link">проекты</a></li>
<li class="header-list__item"><a href="#" class="header-list__link">контакты</a></li>
</ul>
<button class="bt">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</header>