Élargir la taille du sous-menu de Divi

par Julien Guiard | 6 mars 2018 | Snippets Divi | 21 commentaires

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 !

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 :

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

Ces tutoriels pourraient vous intéresser

Comment ?!
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie

20% sur la licence annuelle

21 Commentaires

Webiliko sur 23 avril 2018 à 11h43 am

bonjour quel est le code à mettre pour le “sous” sous menu? Merci
Julien sur 23 avril 2018 à 17h31 pm

Bonjour, ça dependra de la taille de ton sous menu car il faudra prendre en compte le décalage.
lecerf sur 1 août 2018 à 16h21 pm

bonjour,
dans le theme enfant çà ne fonctionne pas, dans dans Apparence -> Personnaliser -> CSS additionnel çà marche ?
Julien sur 2 août 2018 à 01h09 am

Bonjour, oui ça marche. Tu n’as peut-être pas vidé le cache quand tu as essayé la première méthode?
lecerf sur 2 août 2018 à 09h25 am

ok c’était bien çà : vider le cache . merci!
Karl sur 12 novembre 2018 à 14h55 pm

Bonjour,

Je cherche à mettre les liens de mon sous-menu de manière horizontal et non vertical. Le CSS peut-il permettre ça ? Désolé je sais que ce post n’est pas tout à fait en lien avec ce que je demande mais je n’ai pas trouvé d’article traitant du sujet.

Merci d’avance la communauté !
Julien sur 15 novembre 2018 à 16h56 pm

Salut, tu peux le faire avec cette propriété CSS: https://developer.mozilla.org/fr/docs/Web/CSS/text-orientation mais la lecture risque d’être très compliqué pour tes visiteurs non?
Matthieu sur 31 mars 2019 à 21h12 pm

Bonsoir,

Je viens d’effectuer le css avec les mêmes données que vous avez mentionné, mais une partie de mon sous-sous menu chevauche sur sous menu . Quel css puis-je utiliser pour décaler vers la droite le sous-sous menu pour qu’il ne chevauche plus le sous menu ?

Merci d’avance !
Julien sur 1 avril 2019 à 13h06 pm

Bonjour, tu peux me donner le lien que je regarde stp?
Matthieu sur 1 avril 2019 à 21h20 pm

Le site n’est pas visible au public pour le moment, je peux vous envoyer une photo ? Auriez-vous un mail où je peux vous le transmettre ?
Camille MUSEL sur 18 juillet 2020 à 09h51 am

Bonjour,
Je bosse un site pour un client. Il me demande de mettre le menu déroulant sur une seule ligne. J’ai renseigné votre code css mais ça ne fonctionne pas. Voici le site : https://www.planete-caisse.fr/
Pour les menus déroulants “la société” et surtout “nos solutions”.

merci d’avance !
Julien Guiard sur 19 juillet 2020 à 18h38 pm

Hello, je pense que ça vient du cache de ton site car de mon côté ça a l’air de marcher ?
camille-creation@outlook.fr sur 19 juillet 2020 à 19h37 pm

Hello,.
J’ai trouvé la solution entre temps, j’ai dû renseigner un code CSS différent. Merci quand même !
Thomas BELLANGER sur 28 septembre 2020 à 11h15 am

Petite mise à jour la classe à du changer coté divi
de top-menu à menu-top-menu
Solvei sur 29 septembre 2020 à 11h37 am

Mille mercis !!!! Je cherchais et je mettais des codes qui ne marchaient pas !
Mon site est vraiment bien mieux maintenant, comme quoi, rien de tel qu’un beau sous menu avec affichage sur une ligne pour tout changer 🙂
Jean-Claude sur 8 novembre 2020 à 11h53 am

Merci
Cela fonctionne sans soucis,
question : sous (le dernier) un élément de menu principal, je souhaite placer un sticker, pour attirer l’attention du visiteur, est-ce possible et comment modifier ?
d’avance merci
Pierre Bichet sur 16 novembre 2020 à 17h39 pm

Je ne sais pas précisément ce que tu souhaites mais je te conseille d’ajouter une classe CSS à ton élément de menu pour le cibler, puis de styler en conséquence le pseudo-élément ::after.
Nicolas sur 18 décembre 2020 à 15h56 pm

2020 ça n’a plus l’air de fonctionner correctement.
Le texte ne s’adapte pas à son nouvel espace et reste en 2 lignes.

Avez-vous une autre solution ?
Pierre Bichet sur 4 janvier 2021 à 11h10 am

Je confirme que ce snippet est toujours fonctionnel… par contre, si tu utilises le Theme Builder pour créer ton header, le sélecteur de la première règle CSS est différent, c’est .et-menu li li a
Nicolas sur 7 janvier 2021 à 21h53 pm

Merci Pierre Bichet ! Ça m’a échappé sur le moment, tout est ok !
CHRISTOPHE PERRIN sur 14 septembre 2021 à 01h01 am

Bonjour
Je reviens sur l’idée (un poil hors sujet, désolé) du sous menu horizontal sur une ligne en pleine largeur. Grace à ton CSS j’ai redimensionné la largeur du sous-menu (donc j’ai mis 100vw) et les items de mon sous menu apparaissent bien alignés horizontalement. Le problème : le sous menu s’aligne à gauche sous l’item parent, je n’arrive pas à le fixer complètement à gauche de l’écran. C’est possible ?
Merci par avance,