If you use the menu with the Divi logo centered, your mobile menu will be a little different from the standard menu.

In fact, you will have a "Select Page" label displayed right next to the Hamburger icon to open the menu.

As this wording is neither useful nor very aesthetic, we will see two ways of modifying or deleting it.

select split page

The photo of the culprit

Changing the menu label with PHP code

We will be able to modify this text directly in PHP with the str_ireplace() function which allows to replace an expression by another one.

To do this, copy and paste the following code into the functions.php file of your child theme :

function dc_modif_expression($texte) { 
	$texte = str_ireplace('Sélectionner une page', 'Mettez ici la phrase que vous voulez afficher', $texte); 
	return $texte; 
} 

add_filter('gettext', 'dc_modif_expression'); 
add_filter('ngettext', 'dc_modif_expression');

The first expression corresponds to the one you want to replace and the second to the text to be displayed instead of the first.

Here is the code used for the example:

php modification label mobile menu centered Divi

And the result was:

Changing the label of the Divi centered mobile menu with PHP

Be careful however if you use this code, because the expression you are going to replace with this function will be replaced EVERYWHERE on the site. So if in an article or a page you use exactly the same wording as the menu, then it will also be replaced.

Modify the menu label with CSS code

If you don't feel like touching PHP too much, it is also possible to do it in CSS.

For example, you can very simply remove the mobile menu label so that only the hamburger icon appears to your visitors.

For this copy and paste the following code into the style.css file of your child theme or in Appearance -> Customize -> Additional CSS :

.select_page {
	display:none!important;
}

.select_page is the CSS class that allows you to precisely target the label.

This code gives us this:

Delete the label of the centered mobile menu of Divi with CSS

And if you want to modify the text with a sentence of your choice, for example "blah blah blah blah", use the following code instead:

.select_page {
	font-size:0px!important;
}

.select_page:before {
	content:"blablabla";
	font-size: 14px;
} 

Here's what we do here:

  • we give a size of 0px to the original label, which makes it more visible
  • we insert in CSS a content with the value of our character string to which we attribute the same text size as the original text.

And the result:

Modify the label of the Divi centered mobile menu with CSS

If you are assiduous you probably noticed that we use the same technique to translate the expression "Share This" of the Monarch plugin 😉.

Changing menu labels with jQuery

Last method, this time we will modify the label using a small piece of jQuery code.

Go to Divi -> Theme Options -> Integration -> Add code to your blog and copy and paste the following code:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".select_page").text("Nouveau texte");
});
</script>

Simply replace "New text" with the one you want to display and save.

Now you know everything there is to know about changing the mobile menu wording on your site or those of your customers.
It's up to you!