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.
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 :
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:
And the result was:
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 is the CSS class that allows you to precisely target the label.
This code gives us this:
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:
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:
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:
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!