.menu { position: fixed; left: 0; bottom: -15%; width: 100%; height: 25vh; z-index: 2; overflow: visible; transition: transform 0.3s; } .menu-svg{ width: 30vw; height: 40vh; } #menu ul { flex-wrap: wrap; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; background-color: transparent; color: #fff; height: 50px; align-items: center; background-color: rgba(0, 0, 0, 0.7); /* Add a semi-transparent background color for readability */ } @media only screen and (max-width: 600px) { /* Add styles for smartphones screens */ #menu ul { height: auto; flex-direction: column; justify-content: center; } #menu li { margin: 5px 0; } } #menu li { margin: 0 10px; } #menu a { display: block; /* Add this line to make the link fill the entire menu item */ padding: 10px; /* Add some padding for better readability and clickable area */ color: #c25151; text-decoration: none; background-image: url('/assets/img/colonne.svg'); /* Add this line to set the link background image */ background-repeat: no-repeat; background-position: center; background-size: cover; } .menu-link{ margin-left: 10px; width: 100%; position: absolute; } .menu-link use { transition: transform 50ms; transform-origin: center; } .menu-link.menu-bottom-line use { transform-origin: bottom; } .menu-link text { transition: transform 50ms; } .menu .menu-link:hover text { fill: #FFDC00; transform: translateY(-1px); } .menu-link:hover use { transform: scaleY(1.1); } .menu svg { overflow: visible; } .mobile-menu { display: block; position: fixed; top: 0; left: 0; overflow: hidden; width: 100%; z-index: 20; height: 0; background: rgba(15, 15, 23, 0); transition: background-color 0.2s linear; } .mobile-menu .containerF3g { width: 100%; height: 100%; overflow: auto; } .mobile-grid { display: flex; flex-wrap: wrap; padding: 2vh 60px; min-height: 100vh; justify-content: center; align-content: center; } .mobile-menu-link { min-width: 100px; width: 50%; display: block; opacity: 0; cursor: pointer; transform: translateY(10%); transition: transform 0.2s ease-out, opacity 0.2s linear 0.05s; } nav.mobile-menu.open .mobile-menu-link { transform: translateY(0); opacity: 1; } .menu-link:hover text { fill: #FFDC00; } .mobile-brick { display: block; } span.close-mobile-menu { color: #FFF; font-size: 80px; display: block; position: absolute; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ cursor: pointer; bottom: 0; right: 20px; transition: color 0.5s; } span.close-mobile-menu:hover { color: #FFDC00; }