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 😉