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.
P粉5415653222024-02-26 16:22:32
I checked it using Chrome...
Looks like it's working fine!
desktop:
Mobile device to open menu: