I have created a responsive menu bar as show in attached images, it working fine in files level as below:

https://airlineshq.com/airlines/malaysia/index.htm

when go further 1 level down,

https://airlineshq.com/airlines/malaysia/airasia/index.htm

the responsive menu bar still working but the search icon, hamburger 3 row bar and X bar never appear. I believe is due to file structure issue, anybody can assist to check?

help to check on the script below to identify whether any issue?

<div class="navbar" id="nav">
      <a href="https://airlineshq.com" class="active">Home</a>
     <a href="../../../passenger_guides/index.htm">Passenger Guides</a>
      <a href="../../../airlines/index.htm">Airlines Offices</a>
      <a href="../../../lounges/index.htm">Lounges</a>

      <form class="search-box" action="search.htm">
    <input type="text" placeholder="Search..">
    <button type="submit" class="search-icon"><i class="fa fa-search"></i></button>
    
  </form>
    
  <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>  
</div>
</div>

<script>
    function myFunction() {
      var x = document.getElementById("nav");
      
      console.log(barIcon)
      if (x.className === "navbar") {
        x.className += " responsive";
        var barIcon = document.getElementsByClassName('fa-bars')[0];
        barIcon.classList.add("fa-times");
        barIcon.classList.remove("fa-bars");
      } else {
        var closeIcon = document.getElementsByClassName('fa-times')[0];
        closeIcon.classList.remove("fa-times");
closeIcon.classList.add("fa-bars");
        x.className = "navbar";
      }
    }  
</script>