Parfois, les lignes de texte enveloppantes pour les éléments de sous-menu ne sont pas ce que vous voulez ! Voici un astuce rapide pour résoudre ce problème….
Le code ci-dessous fixe la largeur minimale à 300px. Ajustez-la en fonction des besoins de votre site Web. Mettez à jour en conséquence la largeur des éléments de la liste si vous modifiez la largeur minimale du sous-menu. (Par exemple, si vous augmentez/diminuez l’une, augmentez/diminuez l’autre de la même manière).
Il y a une ligne supplémentaire pour réduire le padding par défaut de Divi autour des éléments de la liste des sous-menus. Supprimez cette ligne si elle n’est pas souhaitée pour votre site Web.
Réduisez l’écran, puis rétrécissez et agrandissez la fenêtre d’affichage pour tester sur toutes les tailles de bureau et vous assurer que vos modifications sont optimales pour votre site Web.
/* début augmenter la largeur du menu déroulant */
@media screen and (min-width: 981px) {
.sub-menu {
min-width: 300px;
}
#top-menu li li a {
width: 260px;
/* Extra - Reduce padding on list items */
padding: 4px 12px;
}
}
/* fin augmenter la largeur du menu déroulant */