Не получается сделать hamburger

var a = document.querySelector('.a'); 
var listItem = document.querySelector('.list'); 
 
 
a.onclick = function() { 
  listItem.classList.toggle('lis'); 
  console.log(listItem); 
}

.header{ 
  background-color: #263658 
} 
	 
.nav{ 
  display: -webkit-flex 
	display: -moz-flex 
	display: -ms-flex 
	display: -o-flex 
	display: flex 
	align-items: center 
	justify-content: center 
} 
	 
.a{ 
	// outline: 1px solid red 
	// color: # 
	// background-color: #fff 
	// border: 1px solid red 
  margin-right: 7% 
} 
 
	 
.list{ 
  display: -webkit-flex 
	display: -moz-flex 
	display: -ms-flex 
	display: -o-flex 
	display: flex 
	align-items: center 
	justify-content: center 
	margin: 10px 0 
	list-style-type: none 
	padding-left: 0 
} 
	 
.list-item{ 
  	margin-left: 3% 
} 
.list-item .a{ 
    color: #fff 
		font-family: Montserrat 
		font-size: 14px 
		font-weight: 400 
		text-decoration: none 
		text-align: center 
		white-space: nowrap 
} 
.list-item:first-child{ 
  margin-left: 2% 
} 
		 
 
	 
// .list-item:last-child 
// 	margin-left: 0 
.button{ 
  border-radius: 6px 
	background-color: #fd5f00 
	width: 210px 
	display: -webkit-flex 
	display: -moz-flex 
	display: -ms-flex 
	display: -o-flex 
	display: flex 
	align-items: center 
	justify-content: center 
	font-weight: 700 
	padding: 10px 33px 
} 
 
	 
.lis{ 
  display: block 
} 
	 
.bg{ 
  background-image: url('../img/bg.png') 
	background-size: cover 
	background-color: rgba(0,0,0, .9) 
	min-height: 440px 
} 
	

<header class="header"> 
  <div class="container-fluid"> 
    <div class="row"> 
      <div class="col-md-12"> 
        <div class="menu"> 
          <nav class="nav"> 
            <a class="a"> 
              <i class="fas fa-bars hamburger">class="a"</i> 
            </a> 
            <ul class="list"> 
              <!-- <li class="list-item"> 
              <a><i class="fas fa-bars"></i></a> 
            </li> --> 
              <li class="list-item"> 
                <a href="#">О центре</a> 
              </li> 
              <li class="list-item"> 
                <a href="#">Расписание</a> 
              </li> 
              <li class="list-item"> 
                <a href="#">Тренинги</a> 
              </li> 
              <li class="list-item"> 
                <a href="#">Тренеры</a> 
              </li> 
              <li class="list-item"> 
                <a href="#">Отзывы</a> 
              </li> 
              <li class="list-item"> 
                <a href="#">Аренда залов</a> 
              </li> 
              <li class="list-item"> 
                <a href="#">Контакты</a> 
              </li> 
              <li class="list-item button"> 
                <a href="#">Заказать звонок</a> 
              </li> 
            </ul> 
          </nav> 
        </div> 
      </div> 
    </div> 
  </div> 
</header>