I uploaded all changes to my web hosting service and checked my website (https://cecilia-fornes.tech/accueil.html) on Google Chrome as well as my title and navigation bar (after opening When converted to a hamburger menu) mobile devices) will not function as expected. They are expected to be located in a block at the top of the page, with a hidden menu for mobile devices and a visible menu for large screens. However, it shows two menus and I can't find the reason why. Also, when I try to open the page from a folder on my computer, everything seems fine. I think it's a compatibility issue but I can't figure out where ts is coming from.
This is 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 looking at some selectors, values and property compatibility but came up with nothing and it looked like I was looking for a needle in a haystack.
I checked it using Chrome...
Looks like it's working fine!
desktop:
Mobile device to open menu: