Besoin d'un petit coup de main pour un menu en CSS

Résolu/Fermé
Elise_59 Messages postés 5 Date d'inscription mardi 5 juin 2018 Statut Membre Dernière intervention 8 juin 2018 - 5 juin 2018 à 12:14
Elise_59 Messages postés 5 Date d'inscription mardi 5 juin 2018 Statut Membre Dernière intervention 8 juin 2018 - 8 juin 2018 à 14:48
Bonjour,

Je ne précise pas la config car mon souci d'affichage est identique sous chrome et IE.
C'est un site sous wordpress avec le thème divi. Mon menu déroulant s'affiche correctement sauf lorsque l'on scrolle un peu la page : celui-ci est décalé et se place plus bas.


J'ai joué un peu avec les styles du menu ; j'arrive à régler le souci de décalage en supprimant "position: fixed;" mais les items de mon sous-menu ne sont plus centrées. Donc au final je sollicite votre aide...

Voici le bout de CSS selon moi incriminé :

.nav li ul {
visibility: hidden;
z-index: 9999;
position: fixed;
width: 100vw;
left: 0;
padding: 0;
text-align: center !important;
border: none;
background: #666666;
box-shadow: none;
}

3 réponses

xmediacreation.com Messages postés 49 Date d'inscription mercredi 6 juin 2018 Statut Membre Dernière intervention 11 septembre 2018 8
6 juin 2018 à 09:28
Sur ce thème, le header se voit ajouter (en javascript) la classe et-fixed-header quand on scroll vers le bas, ce qui déplace donc votre menu vers le bas.
Soit vous modifiez cette classe dans le fichier css pour mettre la hauteur voulue (comme ça vous pourrez garder la possibilité d'avoir un effet au scroll), soit vous supprimer la partie du code js qui ajoute cette classe.
0
Elise_59 Messages postés 5 Date d'inscription mardi 5 juin 2018 Statut Membre Dernière intervention 8 juin 2018
Modifié le 6 juin 2018 à 11:16
Bonjour,
Un grand merci pour votre réponse. J'ai essayé hier mais lorsque je supprime "position: fixed; "
ça donne ça (le sous-menu par vers la droite) :

Désolée mais je n'ai quasi pas de notions de CSS ;-)
0
xmediacreation.com Messages postés 49 Date d'inscription mercredi 6 juin 2018 Statut Membre Dernière intervention 11 septembre 2018 8
6 juin 2018 à 12:32
il faudrait l'adresse de votre site pour voir exactement, mais vous pouvez laisser la position fixe.
Regardez plutôt s'il n'y a pas une propriété "translate" qu'il faudrait enlever
0
Elise_59 Messages postés 5 Date d'inscription mardi 5 juin 2018 Statut Membre Dernière intervention 8 juin 2018
7 juin 2018 à 19:23
Merci pour votre nouveau retour.
Je ne vois pas de propriété "translate".
Voici l'url du site : https://brev.fr/
Bonne soirée
0
xmediacreation.com Messages postés 49 Date d'inscription mercredi 6 juin 2018 Statut Membre Dernière intervention 11 septembre 2018 8
7 juin 2018 à 20:01
Vous avez du css en dur dans le header :
.nav li ul {
visibility: hidden;
z-index: 9999;
position: fixed;
align-content:left;
vertical-align:top;
width: 100vw;
left: 0;
padding: 0;
text-align: center !important;
border: none;
background: #666666;
box-shadow: none;
}

Il faut enlever position:fixed

Mais je pense que vous avez du "bidouiller" pas mal entre les différentes versions, du coup, vous avez "à moitié" supprimer l'effet de menu fixe.
C'est dommage
0
Elise_59 Messages postés 5 Date d'inscription mardi 5 juin 2018 Statut Membre Dernière intervention 8 juin 2018
7 juin 2018 à 22:38
oui j'ai créé un header personnalisé pour ajouter la baseline et le logo mase
lorsque je supprime "position:fixed" j'ai le résultat de ma copie d'écran ci-dessus : le sous-menu décale à droite
et si je faisait un menu qui se déroule à la verticale plutôt qu'à l'horizontale, ça changerait quelque chose ?
0
xmediacreation.com Messages postés 49 Date d'inscription mercredi 6 juin 2018 Statut Membre Dernière intervention 11 septembre 2018 8
Modifié le 8 juin 2018 à 06:51
dans ce cas, au niveau du css dans le header, vous enlevez width:100vw
0
Elise_59 Messages postés 5 Date d'inscription mardi 5 juin 2018 Statut Membre Dernière intervention 8 juin 2018
8 juin 2018 à 14:48
super merci !
j'ai fait pas mal de tests qui m'ont conduit à un déroulement vertical qui me semble finalement très bien.
encore merci de votre aide et bon après-midi
0