Le code de mon site Web ne s'exécute pas sur Google Chrome même s'il fonctionne lorsque je l'ouvre à partir d'un document

Question

J'ai téléchargé toutes les modifications apportées à mon service d'hébergement Web et vérifié mon site Web (https://cecilia-fornes.tech/accueil.html) sur Google Chrome ainsi que ma barre de titre et de navigation (qui, une fois ouvertes, convertiront en menu hamburger ) appareils mobiles) ne fonctionnera pas comme prévu. Ils devraient être situés dans un bloc en haut de la page, avec un menu caché pour les appareils mobiles et un menu visible pour les grands écrans. Cependant, il affiche deux menus et je n'arrive pas à trouver la raison. De plus, lorsque j'essaie d'ouvrir la page à partir d'un dossier sur mon ordinateur, tout semble bien. Je pense que c'est un problème de compatibilité mais je n'arrive pas à comprendre d'où vient le problème.

Voici mon code :

function showResponsiveMenu() {
  var menu = document.getElementById("topnav_responsive_menu");
  var icon = document.getElementById("topnav_hamburger_icon");
  var root = document.getElementById("root");
  if (menu.className === "") {
    menu.className = "open";
    icon.className = "open";
    root.style.overflowY = "hidden";
  } else {
    menu.className = "";                    
    icon.className = "";
    root.style.overflowY = "";
  }
}

/* CSS HEADER CODE */
.title{
  font-family: 'lemon_milkbold_italic', 'Times New Roman', 'Arial', serif;;
  font-size: 150%;
  text-shadow: 0.01rem 0.01rem $menu-color;
  color: white;
  background-color: $p-header-color;
  margin-top: -40px;
  margin-left: -8px;
  height: 85px;
  width: 100%;
  z-index: 1;
  position: absolute;
  display: block;
  overflow: hidden;

    &:before, &:after{
      content: '';
      position: absolute;
      top: 0; right: 0;
      height: 100%;
      z-index: 1;
      clip-path: polygon(35% 0, 100% 0%, 100% 100%, 0% 100%);
    }

    &:before {
      background-color: white;
      animation: showText 1200ms ease-in-out;
    }

    &:after {
      background-color: $menu-color;
      animation-delay: 500ms;
      animation: showText 1000ms ease-in-out;
    }

    h1{
      opacity: 0;
      animation: animateText 1000ms forwards;
    }
}

@keyframes animateText {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes showText{
  0% {
    width: 0;
    left: 0;
    transform: translateX(0);
  }
  50% {
    width: 100%;
    transform: translateX(12%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* CSS NAVBAR CODE */

nav {
  font-size: 2em;
  float: left;
  width: 185px;
  height: 100%;
  text-align: center;
  color: black;
}

nav a {
  background-color: $menu-color;
  text-decoration: none;
  color: black !important;
  transform: scale(1);
  transition-property: transform;
  transition: transform 400ms, background-color 400ms;
}

.menu {
  display: inline-block;
  flex-direction: column;
  position: relative;
  text-decoration-line: none;
  background-color: $menu-color;
  width: 100%;
  height: 100%;
  margin-left: -8px;
  margin-top: -27px;
  overflow: auto;
  text-align: center;
  top: 0;
  padding-top: 10%;
  list-style: none;
} 

.topnav {
  background-color: $p-header-color;
  display: flex;
  align-items: center;
  width: 100%;
}

.topnav_link {
  color: $menu-color;
  padding: 12px;
  text-decoration: none;
}

/* hide responsive menu */
#topnav_hamburger_icon,
#topnav_responsive_menu {
  display: none;
}

@media only screen and (max-width: 768px) {
  /* hide classic menu */
  #topnav_menu {
    display: none;
  }

  /* position home link at left and hamburger at right */
  #home_link {
    flex-grow: 1;
  }

  /* disable horizontal scrolling  */
  #root {
    position: relative;
    overflow-x: hidden;
  }

  /* show responsive menu and position at the right of the screen */
  #topnav_responsive_menu {
    display: block;
    position: absolute;
    margin: 0;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100vh;

    z-index: 99;

    transform-origin: 0% 0%;
    transform: translate(200%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #topnav_responsive_menu ul {
    display: flex;
    flex-direction: column;

    position: absolute;
    margin: 0;
    right: 0;
    top: 0;

    min-width: 50vw;
    height: 100vh;
    padding: 56px 0 0;

    text-align: center;

    background: $menu-color;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
  }

  #topnav_responsive_menu li {
    padding: 12px 24px;
  }

  #topnav_responsive_menu a {
    white-space: nowrap;
    color: #333;
    text-decoration: none;
  }

  /* And let's slide it in from the right */
  #topnav_responsive_menu.open {
    transform: none;
    position: fixed;
  }

  /* ******************** HAMBURGER ICON ******************** */
  /* define size and position of the hamburger link */
  #topnav_hamburger_icon {
    display: block;
    position: relative;
    margin: 16px;
    width: 33px;
    height: 28px;

    z-index: 100;

    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
  }

  /* define the style (size, color, position, animation, ...) of the 3 spans */
  #topnav_hamburger_icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    margin-bottom: 5px;

    background: white;
    border-radius: 3px;

    z-index: 100;

    opacity: 1;
    left: 0;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  /* set the 3 spans position to look like a hamburger */
  #topnav_hamburger_icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
  }
  #topnav_hamburger_icon span:nth-child(2) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  #topnav_hamburger_icon span:nth-child(3) {
    top: 24px;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
  }

  /* change color when opening the menu */
  #topnav_hamburger_icon.open span {
    background: #333;
  }

  /* the first span rotates 45° \ */
  #topnav_hamburger_icon.open span:nth-child(1) {
    width: 110%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  /* the second span disappears */
  #topnav_hamburger_icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  /* the last span rotates -45° / */
  #topnav_hamburger_icon.open span:nth-child(3) {
    width: 110%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

<header>
  <div id="root">
  <div id="topnav" class="topnav">
    <a id="homelink" class="topnav_link" href="accueil.html"><h1>CECILIA FORNES GUECHI<br>
      DEVELOPPEUSE WEB FULLSTACK</h1></a>

    <nav role="navigation" id="topnav_menu" class ="menu">
        <ul class="list-unstyled">
          <li><a class="topnav_link" href="accueil.html">Accueil</a></li>
          <li><a class="topnav_link" href="experiences.html">Expériences</a></li>
          <li><a class="topnav_link" href="benevolat.html">Bénévolats</a></li>
          <li><a class="topnav_link" href="formations.html">Formations<a></li>
          <li><a class="topnav_link" href="certif.html">Certifications</a></li>
          <li><a class="topnav_link" href="competences.html">Compétences</a></li>
          <li><a class="topnav_link" href="loisirs.html">Loisirs</a></li>
          <li><a class="topnav_link" href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <a id="topnav_hamburger_icon" href="javascript:void(0);" onclick="showResponsiveMenu()">
      <!-- Some spans to act as a hamburger -->
      <span></span>
      <span></span>
      <span></span>
    </a>

    <nav role="navigation" id="topnav_responsive_menu">
      <ul class="list-unstyled">
        <li><a href="accueil.html">Accueil</a></li>
        <li><a href="experiences.html">Expériences</a></li>
        <li><a href="benevolat.html">Bénévolats</a></li>
        <li><a href="formations.html">Formations<a></li>
        <li><a href="certif.html">Certifications</a></li>
        <li><a href="competences.html">Compétences</a></li>
        <li><a href="loisirs.html">Loisirs</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>

  </div>
  </div>
</header>

J'ai essayé de regarder certains sélecteurs, valeurs et compatibilité des propriétés mais je n'ai rien trouvé, on aurait dit que je cherchais une aiguille dans une botte de foin.

Answer 1

Je l'ai vérifié avec Chrome...

On dirait que ça fonctionne bien !

Bureau :

Appareil mobile pour ouvrir le menu :