Le thème Divi d’Elegant Themes est l’un des thèmes WordPress les plus populaires, notamment pour sa flexibilité et son constructeur de pages visuel qui permet de créer des designs attrayants sans coder. Parmi les nombreuses fonctionnalités offertes par Divi, la gestion des menus est l’une des plus essentielles pour une navigation fluide et ergonomique sur un site web. Toutefois, un problème que rencontrent souvent les utilisateurs de Divi concerne la largeur des menus déroulants (ou menus drop-down). Par défaut, la largeur des sous-menus peut ne pas s’ajuster de manière optimale au contenu, créant ainsi des menus qui ne sont ni esthétiques ni fonctionnels.
Cet article vous guidera à travers le processus pour définir une largeur de menu déroulant à ajustement automatique sur Divi, une fonctionnalité qui améliorera l’apparence et la convivialité de vos menus. Nous nous baserons sur les informations et les méthodes expliquées dans l’article de PeeAye Creative intitulé How to Set an Auto-Adjusting Divi Menu Dropdown Width.
Dans un menu déroulant traditionnel, la largeur est souvent fixée à une valeur spécifique ou dépend de la largeur du menu principal. Cela peut poser problème, notamment lorsque le contenu du sous-menu est plus large que prévu, entraînant des coupures de texte ou un affichage inesthétique. Pour résoudre ce problème, un menu déroulant à largeur ajustable permettra à chaque élément de s’adapter à son contenu, offrant ainsi une meilleure expérience utilisateur.
De plus, un tel ajustement dynamique permet d’éviter des problèmes d’alignement sur des écrans de tailles différentes, et peut améliorer l’accessibilité et l’interaction avec les utilisateurs, en particulier sur des appareils mobiles où l’espace est limité.
Solution proposée
Une solution simple et efficace pour ajuster automatiquement la largeur des menus déroulants dans Divi. L’objectif est d’empêcher que la largeur du sous-menu ne soit trop grande ou trop petite en fonction du contenu, tout en offrant une interface fluide et agréable.
L’astuce consiste à ajouter du code CSS personnalisé qui ajuste la largeur du menu déroulant en fonction du contenu de chaque élément du sous-menu. Cette méthode est simple et ne nécessite pas de modifications complexes dans les paramètres du thème ou de l’utilisation de plugins supplémentaires.
Avant de pouvoir appliquer des styles CSS, il est essentiel de cibler les bons éléments du menu. Pour ce faire, vous devrez inspecter le code HTML généré par Divi pour le menu. Pour ce faire :
- Ouvrez votre site web Divi dans un navigateur.
- Faites un clic droit sur un élément de menu déroulant et sélectionnez Inspecter (ou Inspecter l’élément dans Google Chrome). Cela ouvrira les outils de développement de votre navigateur.
- Trouvez l’élément HTML correspondant au sous-menu déroulant. Vous remarquerez que les sous-menus dans Divi sont souvent encapsulés dans un élément avec la classe
.et_pb_menuou une classe similaire.
2. Ajouter du CSS personnalisé
Une fois l’élément ciblé, vous devrez ajouter un morceau de CSS qui permettra de définir la largeur du sous-menu en fonction de son contenu. Voici le code à ajouter :
/*set the Divi menu dropdown auto width*/
@media only screen and (min-width: 981px) {
.nav li ul {
width: fit-content;
display: flex;
flex-direction: column;
}
.nav li li {
white-space: nowrap;
}
.nav li li a {
width: auto !important;
}
}