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

Messages postés
5
Date d'inscription
mardi 5 juin 2018
Statut
Membre
Dernière intervention
8 juin 2018
- - Dernière réponse : 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;
}
Afficher la suite 

3 réponses

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