élements qui bouge responsive hr pictos

11 mars 2023, 06:39

Bonjour, je bloque depuis plusieurs sur mon responsive... Dès que je passe en mobile, mon hr mes pictos bouge alors que je souhaite toujours les garder au même endroit... Mon objectif était de faire un menu burger, dès lors que je clique du le picto burger mon menu apparait en bas mais j'ai besoin de remettre les élements au bon endroit

Pourriez-vous m'aider je désespère...

voici un exemple en photo et mes lignes de code =

https://ibb.co/85V7WpH

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="SiteC.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>

<body>
    <header>

        <p class="livraison">Livraison gratuite pour commandes de plus de 100€</p>
        <a href="SiteC.html" class="logo"><img src="img/logocybèle.svg"></a>
        <hr class="ligne">
        <nav class="container">

            <ul>
                <li> <a href="#">Accueil</a></li>
                <li> <a href="#">Œuvres</a></li>
                <li> <a href="#">Artistes</a></li>
                <li> <a href="#">Agenda</a></li>
                <li> <a href="#">Lieu</a></li>
                <li> <a href="#">Contact</a></li>
                <li> <a href="#">Carte cadeaux</a></li>
            </ul>
            <a class="menuburger" href="#"><i class="fa-solid fa-bars"></i></a>

             <ul class="navdroite">
                <!-- <input class="recherche" placeholder="   Qu'est ce qui te ferait plaisir ?" type="search"> -->
                <li> <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>
                <li> <a href="#"><i class="fa-solid fa-user"></i></a></li>
                <li> <a href="#"><i class="fa-solid fa-heart"></i></i></a></li>
                <li> <a href="#"><i class="fa-solid fa-cart-shopping"></i></a></li>
            </ul>
        </nav>
        <hr class="ligne2">

    </header>


<footer>
<!--
<main class="logis">
    <div class="livraisons">
    <i class="fa-solid fa-truck"></i>   <br>
    <p class="Titre1">Livraisons garanties</p>
    <p class="SousTitre1"></p>par des transporteurs spécialisés</p> 
</div>
<div class="paiement">
    <i class="fa-solid fa-lock"></i> <br>
    <p class="Titre2"></p>Paiement sécurisés</p>
    <p class="SousTitre2"></p>par CB ou 3x sans frais</p> 
</div>   
<div class="retours">
    <i class="fa-solid fa-rotate-left"></i> <br>
    <p class="Titre3"></p>Retours gratuits</p>
    <p class="SousTitre3"></p>15 jours pour changer d’avis</p> 
</div>   
</main>
 -->
</footer>

</body>

</html>

@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style-type: none;
}

.livraison {
    background-color: blue;
    color: white;
    padding: 0.5rem;
    font-size: 12px;
    text-align: center;
}

.logo {
    margin: 0px auto;
    width: 250px;
    display: block;
    margin-top: 1rem;
}

.ligne {
    background-color:rgb(233, 233, 233);
    border:none;
    height: 1px;
    margin-top: 10px;
}

.ligne2 {
    background-color:rgb(233, 233, 233);
    border:none;
    height: 1px;
    margin-top: 50px;
}

.logis {
    color: #0000FF;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.navdroite {
    float: right;
}

header .container {
    padding: 0 30px;
}

nav ul li a {
    color: blue;
}

header .container .menuburger {
    color: blue;
}

@media screen and (min-width: 963px) {


header .container .menuburger {
    display: none;
}

ul {
    display: flex;
    float: left;
    align-items: baseline;
}

ul li {
    margin: 15px;
}

header .container {
    padding: 0 100px;
}

.logis {
    color: #0000FF;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
}

.livraisons
{
    text-align: center;
    margin: 30px;
}

.paiement
{
    text-align: center;
    margin: 30px;
}

.retours
{
    text-align: center;
    margin: 30px;
}

}

/*
.navdroite .recherche {
    height: 40px;
    width: 210px;
    display: flex;
    color: rgb(233, 233, 233);;
    box-shadow: none;
    border: 1px solid;
    outline: none;
}
*/

11 mars 2023, 10:42

<hr> ??, utilise <div class="ligne"></div>, hr n'est pas prévue pour une utilisation sophistiquée et sert seulement à séparer du texte.

11 mars 2023, 13:56

Très bien, je me suis chargé de remplacer le hr par une div ligne

élements qui bouge responsive hr pictos

Qui est en ligne