Siteyi hızlandırmaya vs. çalışırken CSP yaptım ve menümün kapanma iconunun kayıp olduğunu gördüm. Bu yüzden de menüyü kaldırığ başka bir menü koymam gerekiyor ya da sorunu bir şekilde halletmem gerek. Bende en kısa yol olan hazır menüleri tercih ettim. Tercih ettiğim menü Tayfun abinin hamburger menüsü oldu. Entegre etmeyi denedim ama başaramadım.
Navbar' ım

<nav  class="navbar navbar-desctop">
      <div class="position-relative w-100" >
	    <!-- Brand   -->
		<a class="navbar-brand" href="index.php" title="Türkçe Anasyfa">
			<div id="logo-area" class="logo-black"></div>
			<div class="logo" alt="Günili Logosu">Günili</div>
		</a>
		<div class="container d-block">
	      <span class="phone  my-0 d-none d-md-block">0507 991 74 39</span>
		</div>
	    <!-- Toggler -->
	    <button class="toggler">
	      <span class="toggler-icon"></span>
	      <span class="toggler-icon"></span>
	      <span class="toggler-icon"></span>
	    </button>
	  </div>
	</nav>
    <!-- Navbar Mobile -->  
    <nav  class="navbar navbar-mobile">
      <ion-icon class="close" name="close-outline"></ion-icon>
      <!-- language -->
      <ul class="language">
         <li class="active"><a href="index.php" title="Türkçe Sayfa">TR</a></li>
		    <li><a href="main.php" title="Sorry. We havent ENG page yet.">ENG</a></li>
      </ul>
      <ul class="navbar-nav navbar-nav-mobile">
        <li class="active"><a class="nav-link active" data-menuanchor="home" href="#home" title="İlk sayfa">Ana Sayfa</a></li>
        <li><a class="nav-link" data-menuanchor="testimonials" href="#products" title="Ürünlerimiz">Ürünlerimiz</a></li>
        <li><a class="nav-link" data-menuanchor="testimonials" href="#about" title="Hakkımızda">Hakkımızda</a></li>
        <li><a class="nav-link" data-menuanchor="experience" href="#cadcam" title="CAD/CAM-">Cad / Cam</a></li>
        <li><a class="nav-link" data-menuanchor="skills" href="#cnc" title="CNC">CNC</a></li>
        <li><a class="nav-link" data-menuanchor="projects" href="#robotics" title="Robotik">Robotik</a></li>
        <li><a class="nav-link" data-menuanchor="partners" href="#device_software" title="Cihaz Yazılımları">Cihaz Yazılımları</a></li>
        <li><a class="nav-link" data-menuanchor="contact" href="#contact_form" title="İletişim Formu">İletişim Formu</a></li>
        <li><a class="nav-link" data-menuanchor="contact" href="#contact" title="İletişim">İletişim</a></li>
      </ul>
      <div class="navbar-mobile-footer">
        <p>Copyright © Gunili.com 2020</p>
      </div>
    </nav>

ilgili cssler:

.navbar{
  position: absolute;
  z-index: 100;
  width: 100%;
  padding: 0.5rem;
  border-bottom: 1px solid rgba(52,52,52,0.1);
  height:3.1rem;
}
.navbar-desctop .phone,
.navbar-desctop .email{
  float: left;
  font-family: 'Karla', sans-serif;
  position: relative;
  top:0.3rem;
  margin-right: 1rem;
  margin-left: 30px;
}
.navbar-desctop:before{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 0;
  background:#fff;
  transition: all 0.3s ease;
}
.toggler{
 display: block;
 position: absolute;
 right: 0;
 width:2rem;
 height: 2rem;
 padding:0;
 background: none;
 border:0;
}
.toggler:focus{
  outline: none;
}
.toggler-icon{
  display: block;
  border-top:2px solid #000;
  margin-top: 0.5rem;
}
.toggler-icon:first-child{
  margin-top: 0;
}
.navbar-mobile .language{
  margin-top:0;
  font-size: 0.85rem;
}
.navbar-mobile .language li{
  float: left;
  color: #fff;
  margin-right: 1rem;
}
.navbar-mobile .language li a{
  color: #fff;
}
.navbar-mobile .language .active a,
.navbar-mobile .language li a:hover{
  color: #ffc107;
  text-decoration: none;
}
.menu-is-open{
  overflow:hidden;
}
.menu-is-open .navbar-mobile{
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

"X" ikonum js ile geliyor.