我的网站代码无法在 Google Chrome 上运行，即使当我从我的文档中打开它时它也能运行

Question

I uploaded all of my changes to my web hosting service and checked my website on Google Chrome ( https://cecilia-fornes.tech/accueil.html ) and my header and navbar (transforms into a burger menu when on a mobile device) won't act as expected. They're expected to be in a block on top of the page and have a hidden menu for mobiles, and a visible menu for larger screens. Yet, it shows the two menus, and I can't find why. And more, when I try to open a page from my folder on my PC, everything seems fine. I think it's a compatibility problem, but I can't figure out where does ts come from.

Here's my 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>

I tried to look over some selectors, values, and properties compatibilities and found nothing, it sure looks like I'm looking for a needle in a haystack.

Answer 1

I checked, with Chrome...

Seems to work fine!

Dekstop:

Mobile with menu opened: