Kod tapak web saya tidak akan dijalankan pada Google Chrome walaupun ia berfungsi apabila saya membukanya daripada dokumen-Soal Jawab Rangkaian PHP Cina

Saya memuat naik semua perubahan pada perkhidmatan pengehosan web saya dan menyemak tapak web saya (https://cecilia-fornes.tech/accueil.html) di Google Chrome serta tajuk dan bar navigasi saya (yang apabila dibuka akan Menukar kepada menu hamburger ) peranti mudah alih) tidak akan berfungsi seperti yang diharapkan. Mereka dijangka terletak dalam blok di bahagian atas halaman, dengan menu tersembunyi untuk peranti mudah alih dan menu yang boleh dilihat untuk skrin besar. Walau bagaimanapun, ia menunjukkan dua menu dan saya tidak dapat mencari sebabnya. Selain itu, apabila saya cuba membuka halaman dari folder pada komputer saya, semuanya kelihatan baik. Saya fikir ia adalah isu keserasian tetapi saya tidak dapat mengetahui dari mana ts datang.

Ini kod saya:

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>

Saya cuba melihat beberapa pemilih, nilai dan keserasian harta tetapi tiada apa-apa, nampaknya saya sedang mencari jarum dalam timbunan jerami.