Lorsque le menu de votre site WordPress commence à être encombrant, il est intéressant de penser à réaliser un mega menu. Avec cette structuration, on visualise en un clin d’œil les éléments d’un menu qui, en plus, sont accessibles en un clic. Je vous propose donc de réaliser un mega menu avec le thème Divi.
Structurer les éléments de son menu WordPress.
La première étape consiste à bien structurer les éléments de son menu. Pour cela, on utilisera l’éditeur de menu par défaut de WordPress. Ce dernier est accessible via « Apparence > Menus » du back office de WordPress.
Pour l’exemple, on peut imaginer que nous sommes en train de réaliser un blog voyage. Le menu sera constitué de continents et de pays comme illustré ci-dessous :
Transformer le menu en mega menu
Pour que votre menu devienne un mega menu, il suffira d’ajouter une classe css. Veillez à cocher la case « classes CSS » dans les « options de l’écran ».
Dans les rubriques de votre menu, le champ « classes CSS » est maintenant disponible. Il suffira d’ajouter « mega-menu » dans le champ de la rubrique de premier niveau.
Cliquez sur « Enregistrer le menu » et visualisez le résultat sur votre site.
Maintenant, vous disposez bien d’un mega menu mais…
Par défaut, le mega menu de Divi est sur 4 colonnes
Dans notre exemple, on souhaiterait afficher les 5 continents sur 5 colonnes. Par défaut, le mega menu de Divi affiche les informations sur 4 colonnes, ce qui n’est pas très joli dans notre exemple.
Alors comment faire pour afficher des colonnes supplémentaires à notre mega menu ?
On devra ajouter du code CSS :
- soit dans la feuille de style style.css de votre thème enfant de Divi.
- soit dans les options du thème Divi, dans la rubrique « Personnaliser CSS » de l’onglet « Général ».
En fonction du nombre de colonnes souhaitées, ajoutez l’un des codes suivant.
Mega menu Divi de 5 colonnes
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(6n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 20%;
margin: 0;
}
Mega menu Divi de 6 colonnes
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(7n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 16%;
margin: 0;
}
Mega menu Divi de 7 colonnes
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(8n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 14%;
margin: 0;
}
Mega menu Divi de 8 colonnes
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(9n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 12%;
margin: 0;
}
Le tuto en vidéo
Voilà, comme vous l’avez constaté, la réalisation d’un mega menu avec Divi est relativement simple. Grâce au mega menu, vous vous économiserez un peu de place dans votre barre de menu 😉
Bonjour
Merci pour ce tuto très bien réalisé. Cependant, j’ai une question: comment fait-on avec les sous-sous menus? En mode méga-menu, ils ne s’affichent pas en décalés comme dans un menu traditionnel.
Merci
Bonjour Vinc,
C’est vrai que le megamenu n’est peut-être pas bien adapté pour un menu de plusieurs niveaux… Néanmoins, on doit pouvoir ajouter une classe pour un sous-sous menu de manière à le modifier en css.
Bonjour,
l’info est top mais malgré le fait que j’ai copié le code au niveau du CSS, rien ne change. Quelque soit le code pour lequel j’opte.
As tu une solution ?
Bonjour,
Personnellement ça fonctionne. J’ai mi le code dans DIVI > options du thème > Personnaliser CSS
Bonjour !
Merci pour ce tutoriel qui fonctionne parfaitement !
Par contre, j’ai deux menus qui n’ont pas de sous-menus (comme si c’était Europe et Asie dans votre exemple) et j’aimerais les mettre dans la même colonne, est-ce possible ?
Cordialement.
Bonjour,
Moi non plus avec le code ci-dessus mon mega menu restait sur 4 colonnes. Pour passer sur 5 colonnes j’ai dû ajouter le code suivant :
.et-menu-nav li.mega-menu>ul>li {
width: 20%;
margin: 0;
}
Si ca peux aider certains