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.

#top-menu li li a {
    width: 300px;
}

.nav li ul {
    width: 320px;
}

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é !