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;
}

 

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

D'autres tutoriels pouvant vous intéresser