Besoin d'un petit coup de main pour un menu en CSS [Résolu/Fermé]

Signaler
Messages postés
5
Date d'inscription
mardi 5 juin 2018
Statut
Membre
Dernière intervention
8 juin 2018
-
Messages postés
5
Date d'inscription
mardi 5 juin 2018
Statut
Membre
Dernière intervention
8 juin 2018
-
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

Messages postés
49
Date d'inscription
mercredi 6 juin 2018
Statut
Membre
Dernière intervention
11 septembre 2018
8
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.
Messages postés
5
Date d'inscription
mardi 5 juin 2018
Statut
Membre
Dernière intervention
8 juin 2018

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 ;-)
Messages postés
49
Date d'inscription
mercredi 6 juin 2018
Statut
Membre
Dernière intervention
11 septembre 2018
8
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
Messages postés
5
Date d'inscription
mardi 5 juin 2018
Statut
Membre
Dernière intervention
8 juin 2018

Merci pour votre nouveau retour.
Je ne vois pas de propriété "translate".
Voici l'url du site : http://brev.fr
Bonne soirée
Messages postés
49
Date d'inscription
mercredi 6 juin 2018
Statut
Membre
Dernière intervention
11 septembre 2018
8
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
Messages postés
5
Date d'inscription
mardi 5 juin 2018
Statut
Membre
Dernière intervention
8 juin 2018

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 ?
Messages postés
49
Date d'inscription
mercredi 6 juin 2018
Statut
Membre
Dernière intervention
11 septembre 2018
8
dans ce cas, au niveau du css dans le header, vous enlevez width:100vw
Messages postés
5
Date d'inscription
mardi 5 juin 2018
Statut
Membre
Dernière intervention
8 juin 2018

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