Bonjour,

J'ai fait un menu sur mon portfolio. Tout fonctionne très bien mais je viens de m'apercevoir qu'il ne fonctionnait pas sur ios. Je cherche depuis quelques jours mais je ne trouve pas. Sur ios, quand je clique sur menu, celui-ci ne s'affiche pas

Est-ce qu'une personne accepterait de regarder mon code pour m'aider ?

Voici mon html :

<div class="menu">
    <input class="nav-trigger" type="checkbox" aria-label="Checkbox">
    <nav class="nav-primary">
      <div>
        <ul>
          <li><a href="./#accueil">Accueil</a></li>
          <li><a href="./#biographie">Biographie</a></li>
          <li><a href="./#competences">Compétences</a></li>
          <li><a href="./#projets">Projets</a></li>
          <li><a href="./#contact">Contact</a></li>
          <li id="theme-toggle"><a href="#"><span class="soleil">Light</span></a></li>
        </ul>
      </div>
    </nav>
  </div>

et voici mon css

.nav-primary ul {
    display: flex;
    list-style: none;
    padding: 30px
}



.theme {
    color: var(--colorEcriture);
    font-size: 16px;
    padding-right: 3px;
}

       

#theme-toggle a {
    font-size: 15px;

}

@media (max-width:900px) {
    .nav-trigger {
        display:block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        position: fixed;
        top: 10px;
        z-index: 1;
        background-color: var(--colorSurbrillance);
        color: var(--bleuClair);
        padding: 15px;
        border-bottom-right-radius: 25px;
        -webkit-border-bottom-right-radius: 25px;
        -moz-border-bottom-right-radius: 25px;
        font-family: 'Roboto';
        font-size: 18px
    }

    .menu:not(:focus-within) .nav-primary {
        opacity: 0;
        pointer-events: none
    }

    .menu:not(:focus-within) .nav-trigger::after {
        content: "Menu"
    }

    .menu:focus-within .nav-trigger::after {
        content: "Fermer"
    }

    .menu:focus-within .nav-trigger {
        pointer-events: none
    }


    .nav-primary div {
        inset: 0;
        position: fixed;
        overflow: auto;
        display: flex;
        padding: 20px;
        background-image: linear-gradient(var(--colorBgcolor), var(--colorSurbrillance));
        color: var(--colorEcriture);
        font-size: 30px;
        text-align: center
    }

    .nav-primary ul {
        margin: auto;
        flex-direction: column;
        justify-content: center;
        gap: 30px
    }

}

@media (min-width:901px) {
    .nav-trigger {
        display: none
    }

    .nav-primary {
        font-size: 20px;
        width: 100%;

    }

    .nav-primary ul {
        gap: 30px;
        justify-content: end
    }

}

je vous remercie

Bonne journée

-
Edité par Rhl 5 octobre 2023 à 13:47:19