Sous-menu pousse les éléments du menu parent sur Hover dans WordPress modifié TwentyTwelve

Question

Je travaille sur un site WordPress qui utilise la version modifiée du thème TwentyTweve.

Mon travail consiste à modifier le menu déroulant de navigation, pour le faire glisser vers le bas lorsque les sous-menus déroulants apparaissent en survol. Problème: lorsque les sous-menus déroulent, ils écartent les éléments du menu parent.

Je veux forcer les éléments parents à rester en place. Apprécierait l'aide d'un gourou de CSS/WordPress!

Answer 1

En style.css, la ligne 1515, vous devriez trouver ces attributs WIDTH:

width: 180px; 
width: 12.85714286rem; 

Ce sont les attributs qui spécifient la largeur des sous-menus et « pousser les éléments du menu parent à part ».

Answer 2

Je suis sûr que vous avez déjà travaillé sur quelque chose, mais j'ai juste rencontré ce problème avec mon propre site et je l'ai résolu d'une manière assez différente, alors j'ai pensé que je partagerais.

Pour les éléments du sous-menu, je définis leur largeur à 0px et le texte à ne pas envelopper. Cela affichait le texte du sous-menu complet et ne repoussait pas les éléments parents car les enfants avaient effectivement une largeur de 0px. Cette méthode va également pousser tout contenu en dessous du menu.

width:0px; 
white-space: nowrap; 

Mon site est http://alexkatz.me au cas où vous voulez vérifier.