18041 sujets

Questions générales et questions de débutants

Del

quand je réduis la page, l'hamburger en haut à droite ne s'affiche pas si l'element sticky s'active, je comprends pas pourquoi
Modifié par Efeelios (15 Nov 2020 - 22:48)
Modérateur
Ola !

Bon déjà nous on a pas les images et les scripts du coup c'est un peu tout blanc chez nous :
upload/1605519018-42161-capture.jpg
Pense a mettre des couleurs en fallback de tes images, en dehors de nous c'est aussi une bonne pratique.

Sinon ton burger disparait parce que tu lui change sa couleur quand il est en sticky :
upload/1605519242-42161-stickyfail.jpg
Je pense que c'est un effet de bord. Tu ne voulais pas le cibler mais tu as fait un sélecteur trop imprécis. Essaie de mettre des classes spécifiques plutôt que de cibler les éléments (ici span) directement.

Pense à l'inspecteur de code pour débuguer ! Smiley cligne

Bonne journée
Modifié par _laurent (16 Nov 2020 - 10:36)
Meilleure solution
yo, tout est corrigé sauf pour les classes à la place des span j'ai vaguement compris, tu me conseilles de tout effacer (les span) remplacer par une classe div seulement le résultat sera le même? ou 3 div class avec un name different?
Modérateur
J'avais mal regardé ton code. J'ai suposé qu'il y avait plusieurs sortes de <span> dans .menu-toggler et je pensais donc que ton sélecteur .sticky .menu-toggler span avait un but précis mais prenait également ton burger sans faire exprès. Du coup je préconisais de mettre plutot des class sur les span pour les utiliser dans le CSS a la place de la balise. Ex
<div class="menu-toggler">
                <span class="burger"></span>
                <span class="burger"></span>
                <span class="burger"></span>
                <div>
                                <span class="autre-span-pas-burger"></span>
                                <span class="autre-span-pas-burger"></span>
                </div>
</div>

.sticky .menu-toggler .autre-span-pas-burger {
    background-color: #212121;
}


Mais vu que dans ton code :
<div class="menu-toggler">
                <span></span>
                <span></span>
                <span></span>
</div>

les seuls span dans .menu-toggler son ceux du burger tu peux laisser ainsi Smiley smile .

Mais du coup c'était quoi le but de :
.sticky .menu-toggler span{
    background-color: #212121;
}
?
Sujet clos
Aller à