Si vous utilisez le menu avec le logo centré de Divi, votre menu mobile sera un peu différent du menu standard.
En effet, vous aurez un libellé « Sélectionner une page » affiché juste à côté de l’icône Hamburger pour ouvrir le menu.
Ce libellé n’étant ni utile, ni très esthétique, nous allons voir deux manières de le modifier ou le supprimer.
La photo du coupable
Modifier le libellé du menu avec du code PHP
On va pouvoir modifier ce texte directement en PHP avec la fonction str_ireplace() qui permet de remplacer une expression par une autre.
Pour ceci, copiez-collez le code suivant dans le fichier functions.php de votre thème enfant :
La première expression correspond à celle que vous souhaitez remplacer et la deuxième par le texte à afficher à la place de la première.
Voici le code utilisé pour l’exemple :
Et le résultat obtenu :
Attention cependant si vous utilisez ce code, car l’expression que vous allez remplacer avec cette fonction le sera PARTOUT sur le site. Donc si dans un article ou une page vous utilisez exactement le même libellé que le menu, alors il sera également remplacé.
Modifier le libellé du menu avec du code CSS
Si vous n’avez pas trop envie de toucher au PHP, il est également possible d’y arriver en CSS.
Vous pouvez par exemple très simplement supprimer le libellé du menu mobile afin de ne laisser apparaître que l’icône hamburger à vos visiteurs.
Pour ceci copiez-collez le code suivant dans le fichier style.css de votre thème enfant ou dans Apparence -> Personnaliser -> CSS additionnel :
.select_page est la classe CSS qui permet de cibler justement le libellé.
Ce code nous donne ceci :
Et si vous souhaitez modifier le texte par une phrase de votre choix, par exemple « blablabla », utilisez plutôt le code suivant :
Voici ce que l’on fait ici :
- on donne une taille de 0px au libellé d’origine, ce qui fait qu’on le voit plus
- on insère en CSS un contenu avec pour valeur notre chaine de caractère à laquelle on attribut la même taille de texte que le libellé original.
Et le résultat :
Si vous êtes assidu vous avez surement remarqué qu’on utilisait la même technique pour traduire l’expression “Share This” du plugin Monarch 😉
Modifier le libellé du menu avec jQuery
Dernière méthode, cette fois on va modifier le libellé en utilisant un petit bout de code jQuery.
Rendez-vous dans Divi -> Options du thème -> Intégration -> Ajouter du code dans le < head > de votre blog et copiez-collez le code suivant :
Remplacez simplement “Nouveau texte” par celui que vous voulez afficher et sauvegardez.
Vous savez maintenant tout ce qu’il y a à savoir pour modifier le libellé du menu mobile sur votre site ou ceux de vos clients.
À vous de jouer !
Bonjour,
Quels sont les avantages et les inconvénients de chacune des méthodes ?
Merci pour votre réponse 😉
Bonjour, je dirais que c’est la méthode PHP car elle se fait coté serveur alors que les autres se dont coté client, donc c’est la méthode qui “s’affichera” le plus rapidement pour le visiteur.
Bonjour.
Sur mon site (https://www.positivecommunication.fr/) je me retrouve avec la barre vide (puisque je ne voulais pas mettre de texte.
Comment je peux supprimer complètement le menu, s’il vous plait ?
Merci par avance ! 🙂