Probème toogle:checked par AxelHippolite - page 1

Bonjour,

Alors voilà, j'ai essayer de faire un menu déroulant : quand j'appuie sur un le toggle, le "display" du menu passe de "None" à "Block". Cependant, même si l'implémentation s'est bien passé, il me reste un gros problème : rien ne se passe quand j'appuie sur le toggle en question. J'ai essyer plusieus solutions, en vain. Je vous joins donc mon code HTML et CSS dans l'espoir que vous puissiez m'aider. Merci d'avance.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="stylesheet.css"/>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
        <title>Suppr</title>
    </head>
    <body>
        <header>
            <div class="navbar">
                <h1><a href="index.php">Suppr</a></h1>
                <label for="toggle">&#9776;</label>
                <input type="checkbox" id="toggle"/>
                <ul>
                    <li><a href="">Contests</a></li>
                    <li><a href="">Rating</a></li>
                    <li><a href="">Shop</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Profile</a></li>
                    <li><a href="">Log In</a></li>
                </ul>
            </div>
            <div class="banner">
                <div class="container">
                    <h1>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h1>
                    <h2>XXXXXXXXXXXXXXXXXXXXXX</h2>
                </div>
            </div>
        </header>
    </body>
</html>

*{
    margin: 0;
}
ul{
    padding-inline-start: 0px;
}
header{
    height: auto;
    width: 100%;
    background-color: #FBAB7E;
    background-image: linear-gradient(180deg, #FBAB7E 0%, #F7CE68 100%);
}
.navbar{
    display: flex;
    align-items: center;
    padding: 2rem;
}
.navbar a{
    text-decoration: none;
    color: #ffffff;
}
.navbar h1{
    text-align: left;
    text-transform: uppercase;
    font-size: 64px;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 10px;
}
.navbar label{
    display: none;
    text-align: right;
    font-size: 48px;
    line-height: 70px;
    color: #ffffff;
}
.navbar ul{
    flex: 1;
    text-align: right;
}
.navbar ul li{
    display: inline-block;
    padding: 1rem;
    text-transform: uppercase;
    list-style: none;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 7px;
}
.banner{
    display: flex;
    height: 60vh;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.banner h1{
    padding: 1rem;
    text-transform: uppercase;
    font-size: 3rem;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 10px;
    color: #ffffff;
}
.banner h2{
    padding: 1rem;
    text-transform: uppercase;
    font-size: 2rem;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 6px;
    color: #ffffff;
}
#toggle{
    display: none;
}

@media only screen and (max-width:965px){
    .navbar{
        display: block;
        padding: 2rem 2rem 0 2rem;
    }
    .navbar h1{
        padding: 0 0 1rem 0;
        text-align: left;
        font-size: 8vw;
    }
    .navbar ul{
        display: none;
        text-align: center;
    }
    #toggle:checked + .navbar{
        display: block;
    }
    .navbar ul li{
        display: block;
        padding: 0.5rem;
        font-size: 4vw;
    }
    .navbar label{
        display: block;
        cursor: pointer;
    }
    .banner{
        height: 60vw;
    }
    .banner h1{
        padding: 0 1rem;
        font-size: 6vw;
    }
    .banner h2{
        font-size: 4vw;
    }
}

Respectueusement,

Axel Hippolite.

Probème toogle:checked

Probème toogle:checked

Supprimer

Modérer

Signaler le message aux modérateurs