Une question qui revient assez souvent sur le groupe Facebook Support Divi Community et qui méritait donc un tutoriel simple et rapide.

Comment élargir la taille des sous-menus de Divi ?

Les sous-menu de Divi ont une largeur de 200px si vous les laissez tel quel. Lorsque vous utilisez des intitulés de menu un peu longs, ceux-ci s’affichent alors sur deux lignes. D’une part, cela prend plus de place que nécessaire… et d’autre part, ça ne plait évidemment pas à vos clients !

sous-menus divi

Pour remédier à ce problème et définir la taille de vos sous-menus suivant la longueur de vos intitulés, je vous invite à utiliser le code suivant en le copiant-collant soit dans Apparence -> Personnaliser -> CSS additionnel, soit dans le fichier style.css de votre thème enfant.

[pastacode lang=”css” manual=”%23top-menu%20li%20li%20a%20%7B%0A%20%20%20%20width%3A%20300px%3B%0A%7D%0A%0A.nav%20li%20ul%20%7B%0A%20%20%20%20width%3A%20320px%3B%0A%7D” message=”” highlight=”” provider=”manual”/]

Notez que si vous utilisez le Theme Builder pour créer votre header, il vous faut utiliser le sélecteur .et-menu li li a pour la première règle CSS précisée ci-dessus.

Ici vous avez deux valeurs à ajuster suivant vos intitulés :

  • ligne 2 : la largeur du contenant de votre intitulé
  • ligne 6 : la largeur totale du sous-menu

Et voila le résultat :

sous-menus une ligne divi

C’est quand même plus propre non ?

Vous n’avez plus qu’à essayer différentes valeurs pour voir lesquelles vous permettent un affichage sur une ligne et le tour est joué !