J'ai créé une barre de menu réactive comme indiqué dans les images jointes, cela fonctionne bien au niveau des fichiers comme ci-dessous : entrez la description de l'image ici

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

Quand aller plus loin d'un niveau plus bas,

enter image description here

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

La barre de menu réactive fonctionne toujours mais l'icône de recherche, la barre de hamburger à 3 rangées et la barre X n'apparaissent jamais. Je crois que c'est dû à un problème de structure de fichier, quelqu'un peut-il aider à vérifier?

Aide à vérifier sur le script ci-dessous pour identifier s'il y a un problème?


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

1
sexy18 3 oct. 2021 à 05:21

2 réponses

Meilleure réponse

Un niveau plus bas peut ne pas avoir le bon chemin vers fontawesome

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

Niveau suivant <link type="text/css" rel="stylesheet" href="../../fontawesome.ccs" />

1
Joseph Troy 3 oct. 2021 à 02:38

Il peut s'agir d'un problème de structure de fichier. Vous pouvez résoudre ce problème en ajoutant une balise base dans l'en-tête de votre document afin que les feuilles de style et les scripts inclus soient uniformes sur toutes les pages. En utilisant la première page comme référence, vous utiliseriez la balise de base suivante :

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

Ajustez ensuite tous vos link et autres URI relatifs comme dans l'exemple suivant :

<link rel="STYLESHEET" href="style1.css" type="text/css">
0
phentnil 3 oct. 2021 à 02:47