Divi est un thème WordPress extrêmement flexible à bien des égards. Il fait désormais partie de notre routine quotidienne puisque nous l’intégrons dans la plupart de nos projets e-commerce ou de site vitrine. Hélas, un de ses gros points de progression reste le paramétrage et la personnalisation du header et du menu primaire et secondaire.

Bien souvent, il faut utiliser quelques lignes de code CSS pour obtenir le résultat souhaité, en attendant que Elegant Themes propose enfin un outil de gestion du header digne de ses autres modules, qui devrait être inclus dans une mise à jour majeure appelée « Theme builder » que nous attendons avec impatience.

Cet article vise à proposer une liste la plus complète possible (je vais la mettre à jour au gré des différents cas de figure que nous rencontrons) de solutions pour personnaliser le header et le menu de Divi. Certains paramétrages – même assez subtils – peuvent être fait via l’éditeur de thème et de menu natif de WordPress sans coder. D’autres requièrent l’utilisation d’un peu de CSS basique qu’il suffit en général de copier-coller et de modifier légèrement pour obtenir le résultat souhaité.

Les bases : utiliser le personnaliseur de thème de WordPress pour éditer menu et header de Divi

C’est la solution de base et la plus simple pour modifier header, menu et footer aussi du reste ainsi que de nombreuses autres options. Pour y accéder, connectez-vous à votre Tableau de bord puis dirigez-vous vers l’onglet Apparence > Personnaliser comme indiqué ci-dessous :

Cette nouvelle interface qui s’affiche alors vous donne accès à de nombreuses options.

Pour ajouter des bouts de code CSS que nous donnons dans la suite de ce tutoriel, vous aurez besoin d’utiliser l’onglet « CSS additionnel » indiqué ci-dessous :

Vous ajouterez votre code CSS soit en le rédigeant soit en le copiant-collant dans la zone prévue à cet effet. La plupart des changements sont visibles instantanément dans la fenêtre de prévisualisation de droite. Pratique ! N’oubliez-pas de Publier vos ajouts avec le bouton bleu en haut à droite.

 

Comment masquer la petite flèche du menu principal ?

Lorsqu’un menu contient un sous-menu, Divi affiche automatiquement une petit flèche à la droite du nom du menu en question. Il est possible de masquer cette petit flèche avec le code suivant :

#‎top-menu .menu-item-has-children > a:first-child {padding-right: 0px; padding-bottom: 17px!important;}
#top-menu .menu-item-has-children > a:first-child:after{content:  »; margin-top: -2px;}
#top-menu .menu-item-has-children {padding-right: 0px;}

La dernière ligne du code sert à modifier légèrement l’écartement entre deux élément du menu afin de compenser l’espace vide laissé par la suppression de la petit flèche.

Comment ajouter un élément dans le menu secondaire de Divi ?

Le menu secondaire de Divi est celui qui s’affiche au-dessus du menu principal, sous la forme d’une mince bande paramétrable depuis l’éditeur de thème, section « éléments de l’en-tête ». Par défaut, ce menu secondaire ne contient qu’un numéro de téléphone, un email et des icônes de réseaux sociaux. Il est possible d’y ajouter des éléments cliquables supplémentaires très facilement via l’onglet Apparence > Menu de WordPress.

Commencez par créer un nouveau menu, nommez le « Menu secondaire » par exemple. Ensuite ajoutez-y un lien personnalisé que vous nommerez selon votre besoin et sauvegarder le changement. Et c’est déjà fini, votre lien apparaît désormais dans le header.

Comment ajouter une icône devant un élément du menu secondaire ?

Après avoir créé votre lien personnalisé dans le menu secondaire de Divi comme expliqué ci-dessus, vous allez devoir activer l’affichage des classes en ouvrant l’onglet situé en haut à droite de l’écran et intitulé « Options d’affichage » puis activer les classes.

Une fois ceci fait, un nouveau champs s’affiche pour chaque élément du menu ou de sous-menus. Il ne vous reste plus u’à attribuer une classe de votre choix à l’élément, « exemple-de-classe » dans mon code ci-dessous qu’il conviendra donc de remplacer dans le code également avec le texte que vous aurez choisi.  Sauvegardez vos changement puis ouvrez l’éditeur de thème de WordPress, section « CSS additionnel » puis collez le code CSS ci-dessous :

.exemple-de-classe a:before {
font-family: ‘ETModules’;
content : « \e081 »;
margin-right: 5px ;
color: #d20018;
}

Vous devrez remplacer le code « \e081 » par celui correspond à l’icône souhaitée. Liste complète des codes ici en prenant soin de bien remplacer le « &# » par un « \ ».

Vous pouvez aussi modifier le code couleur en modifiant la ligne color: #d20018;

Comment obtenir un logo qui déborde au dessus ou en dessous du header ?

Le résultat espéré ressemble à ceci :

La code CSS pour obtenir un tel résultat est :

@media only screen and (max-width: 980px) {
#logo {
min-height: 180px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 200px;
}
}

 

Comment avoir un logo différent pour chaque page ?

Si vous souhaitez obtenir un logo qui change en fonction de la page, vous pouvez utiliser le code CSS ci-dessous :

.page-id-XXX img#logo {display: none;}
.page-id-XXX .logo_container a {content: url(https://adressedevotreimage.jpg) !important;max-height: 120%;}

Vous aurez au préalable uploadé votre logo bis dans votre galerie d’image et récupéré l’adresse du fichier.

Vous devrez aussi récupérer l’ID de la page sur laquelle vous souhaitez modifier le logo (en plaçant votre curseur au-dessus de son nom dans l’admin wordpress et et en récupérant son ID dans l’url affiché en pied de page de votre navigateur). Vous remplacerez le XXX du code ci-dessous par votre ID.

Changer la couleur du menu hamburger

span.mobile_menu_bar:before{
color:#8d8d8d;
}

Changer la couleur de la ligne bleue qui sépare le menu mobile déroulant du header

.et_mobile_menu { border-top: 3px solid #8d8d8d; }

Modifier le point de rupture du menu de Divi

Le point de rupture (breakpoint en langage CSS) est le point à partir duquel le menu classique visible sur pc se transforme en menu hamburger . Modifier le point de rupture du menu header permet de résoudre assez simplement un souci fâcheux rencontré avec Divi : un menu trop long passe sur 2 lignes (ce qui est inesthétique) et bien souvent il chevauche le logo (ce qui est carrément laid).

Pour corriger cela, un peu de CSS et le tour est joué :

@media only screen and ( max-width: 1100px ) {
#top-menu-nav, #top-menu {display: none;}
#et_top_search {display: none;}
#et_mobile_nav_menu {display: block;}

Vous allez devoir modifier la valeur 981px pour l’adapter à la taille de votre menu.
Personnellement, je ne m’embarrasse plus de subtilités car le menu hamburger est désormais rentré dans les moeurs d’un point de vue ergonomique (et je le trouve très agréable et esthétique) donc je l’appelle très vite avec un max-width fixé à 1100px.

Ajouter un séparateur vertical entre chaque élément du menu

Ajouter un séparateur vertical entre les éléments du menu est un excellent moyen de redonner un peu de peps au menu par défaut de Divi qui est plutôt tristounet. 

Pour se faire, il vous suffit de copier-coller ces lignes de code CSS dans votre éditeur CSS :

#top-menu .menu-item:before{
content: ‘|’;
position: absolute;
right: 7px; /* Modifier cette valeur pour moduler l’espacement de chaque côté de la petite ligne verticale*/
}

#top-menu .menu-item:last-child:before{
content: »;
}

#top-menu .menu-item-has-children .sub-menu .menu-item:before{
content: »;
}