Menu déroulant responsive, problème sur mobile

Fermé
CatS13 - 20 avril 2021 à 13:11
Bonjour,

J'ai suivi un tuto pour créer un menu déroulant responsive en HTML/CSS3/JS pour un site fait avec Carrd (je connais HTML/CSS mais d'habitude j'utilise bootstrap, ici avec Carrd c'est pas possible malheureusement). Il fonctionne mais sur mobile, le menu ne fonctionne que sur la page d'accueil, pas sur les autres pages, je ne comprends pas pourquoi.

Auriez-vous une idée ? Voici le code entier (intégré comme ça dans Carrd, pas d'autre choix) :

<style>
:root {
box-sizing: border-box;

--primary: #fff;
--hover-color: #fff;
--dark: #1c2022;
--light: #1E73BE;
--lightbis: #fff;

--header-bg: var(--primary);
}
  • ,*::after,*::before { box-sizing: inherit; margin: 0; padding: 0;}body { font-family: "josefin sans", "helvetica", sans-serif; font-size: 1rem;}#navbar { background: var(--header-bg); position: fixed; left: 50%; transform: translateX(-50%); top: 0; z-index: 10;}.branding-logo { color: var(--light); font-size: calc(0.8rem + 1vw); text-decoration: none;}.navbar { display: flex; justify-content: space-between; align-items: center;}.menu_tpa { display: flex; flex-direction: row;}.menu_tpa li { list-style: none;}.menu_tpa li a { display: block; text-decoration: none; color: var(--light); padding: 1em 1.5em; font-size: 1rem; min-width: 11em;}.submenu li a { color: var(--lightbis);}/* Styling submenu */.has-dropdown { position: relative;}.submenu { position: absolute; right: 0; background-color: var(--dark); white-space: nowrap; padding: 1.5em 0; width: 11em; /* hide submenus */ opacity: 0; transform: scaleY(0); transform-origin: top center;}.submenu > li > a { padding: 0.8em 1.5em;}.submenu .submenu { left: -100%; top: 0;}.submenu .submenu .submenu { left: -100%; top: 0;}.menu_tpa > li:hover > a,.submenu > li:hover > a { background-color: hsla(0, 0%, 100%, 0.05); color: var(--hover-color);}.menu_tpa > li:hover > a { background-color: hsla(0, 0%, 0%, 0.95);}/* Arrows */.arrow { width: 0.5em; height: 0.5em; display: inline-block; vertical-align: middle; border-left: 0.15em solid currentColor; border-bottom: 0.15em solid currentColor; transform: rotate(-45deg); margin-top: -0.25em; transition: transform 100ms ease-in-out;}/* Reveal */.menu_tpa > li:hover > a + .submenu,.submenu > li:hover > a + .submenu { opacity: 1; transform: scaleY(1);}/* ANIMATE aRROWS */.menu_tpa > li:hover > a > .arrow,.submenu > li:hover > a > .arrow { transform: rotate(225deg);}@media only screen and (max-width: 78.75em) { .submenu .submenu .submenu { left: -100%; top: 0.5em; } .submenu { min-width: 16em; }}@media only screen and (max-width: 62em) { .menu_tpa li a { font-size: 1rem; }}@media only screen and (max-width: 50em) { #navbar {/* position: fixed; */ padding: 1.5em 2em; width: 100%; } .menu_tpa { flex-flow: column; position: absolute; background: var(--lightbis); top: 4.55em; left: 0; right: 0; height: 100vh; opacity: 0; transform: scaleY(0); transform-origin: top center; transition: 200ms transform cubic-bezier(0.36, 0.4, 0.42, 1.48) 100ms, 100ms opacity ease-in-out; overflow-y: scroll; } .menu_tpa > li > a { font-size: 1rem; color: var(--dark); } .submenu > li > a { font-size: 1rem; } .submenu { top: 0; padding-left: 1.5em; border-left: 0.12em dotted hsla(342, 99%, 45%, 0.95); } .submenu .submenu { left: 0; top: 0; } .submenu .submenu .submenu { left: 0; top: 0; } .menu_tpa > li:hover > a + .submenu, .submenu > li:hover > a + .submenu { position: relative; } .hamburger { width: 2em; height: 0.25em; display: block; background: var(--light); position: relative; cursor: pointer; transition: 0.2s transform ease-in-out; } .hamburger::after, .hamburger::before { content: ""; position: absolute; left: 0; background: inherit; width: inherit; height: inherit; transition: 0.2s transform ease-in-out; } .hamburger::after { top: 0.65em; } .hamburger::before { bottom: 0.65em; } .close::after, .close::before { top: 0; transition: 0.2s transform ease-in-out; } .close::before { display: none; } .close { transform: rotate(45deg); transition: 0.2s transform ease-in-out; } .close::after { transform: rotate(-90deg); } /* reveal menu */ input[type="checkbox"]:checked + .menu_tpa { position: absolute; opacity: 1; transform: scaleY(1); }}</style><script>const hamburger = document.querySelector(".hamburger");hamburger.addEventListener("click", function (){ this.classList.toggle("close");});</script> <div id="navbar"> <nav class="navbar"> <label for="input-hamburger" class="hamburger "></label> <input type="checkbox" id="input-hamburger" hidden> <ul class="menu_tpa"> <li><a href="https://thepluralwarmline.org/" class="menu-link">Home</a></li> <li class="has-dropdown"> <a class="menu-link">Warmline <span class="arrow"></span> </a> <ul class="submenu"> <li><a href="https://thepluralwarmline.org/#call" class="menu-link">Call</a></li> <li><a href="https://thepluralwarmline.org/#email" class="menu-link">Email</a></li> <li><a href="https://thepluralwarmline.org/#chat" class="menu-link">Chat</a></li> <li><a href="https://thepluralwarmline.org/#text" class="menu-link">Text SMS</a></li> <li><a href="https://thepluralwarmline.org#section08" class="menu-link">First time callers</a></li> <li><a href="https://thepluralwarmline.org#section09" class="menu-link">What we are not</a></li> <li><a href="https://thepluralwarmline.org#faq" class="menu-link">FAQ</a></li> </ul> </li> <li class="has-dropdown"> <a class="menu-link">About <span class="arrow"></span> </a> <ul class="submenu"> <li><a href="https://thepluralwarmline.org/#about" class="menu-link">About us</a></li> <li><a href="https://thepluralwarmline.org/#principles" class="menu-link">Principles</a></li> <li><a href="https://thepluralwarmline.org/#team" class="menu-link">Volunteers & Board</a></li> <li><a href="https://thepluralwarmline.org/#statutes" class="menu-link">Statutes</a></li> <li><a href="https://thepluralwarmline.org/#history" class="menu-link">History</a></li> <li><a href="https://thepluralwarmline.org/#volunteer" class="menu-link">Volunteer</a></li> <li><a href="https://thepluralwarmline.org/#media" class="menu-link">Media</a></li> </ul> </li> <li class="has-dropdown"> <a class="menu-link">Resources <span class="arrow"></span> </a> <ul class="submenu"> <li><a href="https://www.thepluralassociation.community" target="_blank" class="menu-link">Courses</a></li> <li><a href="https://thepluralassociation.org/training/" target="_blank" class="menu-link">Training</a></li> <li><a href="https://www.thepluralassociation.community" target="_blank" class="menu-link">Community</a></li> <li><a href="https://powertotheplurals.com" target="_blank" class="menu-link">Blog</a></li> <li><a href="https://youtube.com/powertotheplurals" target="_blank" class="menu-link">YouTube</a></li> <li><a href="https://thepluralassociationfr.carrd.co" target="_blank" class="menu-link">French</a></li> <li><a href="https://thepluralassociation.nl" target="_blank" class="menu-link">Dutch</a></li> </ul> </li> <li class="has-dropdown"> <a class="menu-link">FAQ <span class="arrow"></span> </a> <ul class="submenu"> <li><a href="https://thepluralwarmline.org#faq" class="menu-link">Warmline</a></li> <li><a href="https://powertotheplurals.com/faq-resource-about-plurality/" target="_blank" class="menu-link">Plurality</a></li> <li><a href="https://thepluralwarmline.org#donate" class="menu-link">Clinicians</a></li> </ul> </li> <li class="has-dropdown"> <a class="menu-link">Donate <span class="arrow"></span> </a> <ul class="submenu"> <li><a href="https://thepluralwarmline.org/#donate" class="menu-link">Donate directly</a></li> <li><a href="#" class="menu-link">Fiscal sponsor</a></li> </ul> </li> </ul> </nav> </div>


Merci beaucoup !
A voir également: