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.
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é !
bonjour quel est le code à mettre pour le “sous” sous menu? Merci
Bonjour, ça dependra de la taille de ton sous menu car il faudra prendre en compte le décalage.
bonjour,
dans le theme enfant çà ne fonctionne pas, dans dans Apparence -> Personnaliser -> CSS additionnel çà marche ?
Bonjour, oui ça marche. Tu n’as peut-être pas vidé le cache quand tu as essayé la première méthode?
ok c’était bien çà : vider le cache . merci!
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é !
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?
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 !
Bonjour, tu peux me donner le lien que je regarde stp?
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 ?
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 !
Hello, je pense que ça vient du cache de ton site car de mon côté ça a l’air de marcher ?
Hello,.
J’ai trouvé la solution entre temps, j’ai dû renseigner un code CSS différent. Merci quand même !
Petite mise à jour la classe à du changer coté divi
de top-menu à menu-top-menu
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 🙂
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
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
.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 ?
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
Merci Pierre Bichet ! Ça m’a échappé sur le moment, tout est ok !
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,