Il arrive parfois que la taille des éléments du sous-menus, ou menu déroulant ne correspondent pas à ce que vous souhaitez ! Voici une petite astuce pour résoudre ce problème…
Le code ci-dessous fixe la largeur minimale à 300px. Adaptez cette valeur en fonction de votre site web. Si vous modifiez la largeur minimale du sous-menu, mettez à jour la largeur des éléments de la liste en fonction de cette modification. (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 remplissage par défaut de Divi autour des éléments de la liste du sous-menu. 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 réglages sont optimaux lors de la création de votre site web.
/* Increase width of drop-down menus */
@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;
} }
Où ajouter le code ?
Naviguez vers Divi > Options de thème et en bas de l’onglet « Général » collez l’extrait CSS dans la boîte « CSS personnalisé » et enregistrez les modifications