menu bar JavaScript and file level issue-CodePudding

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/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>

CodePudding user response：

One level down may not have the right path to fontawesome

Top level: <link type="text/css" rel="stylesheet" href="../fontawesome.ccs" />

Next Level <link type="text/css" rel="stylesheet" href="../../fontawesome.ccs" />

CodePudding user response：

It may be a file structure issue. You could solve this by adding a base tag in the head of your document so that the included stylesheets and scripts will be uniform across all pages. Using the first page as the reference, you would use the following base tag:

<base href="https://airlineshq.com/">

Then adjust all of your links and other relative URIs as in the following example:

<link rel="STYLESHEET" href="style1.css" type="text/css">