The Divi Theme comes with a range of header formats, including two "centered" layouts. When viewing these centered layouts on mobiles, the header menu is shown along with the "Select Page" text, e.g.
If you'd like to remove or change this text, there are a couple of options.
Hiding the "Select Page" text with CSS
If you want to remove the "Select Page" text entirely, you can do so by adding CSS to Divi, as follows:
.select_page { visibility: hidden; }Changing the "Select Page" using PHP
If you're comfortable adding PHP to Divi, you can replace the "Select Page" text with text of your choosing with the following code snippet:
add_filter('gettext', 'change_select_page_text', 20, 3);
function change_select_page_text($text, $orig, $domain ) {
if ($domain == 'Divi' and $orig == 'Select Page') { return 'Pick a Section'; }
return $text;
}Removing / Changing the "Select Page" Text with Divi Booster
Divi Booster now includes an option to change the "Select Page" text. The option can be found on the Divi Booster settings page under Header > Mobile Header > Change centered menu "Select Page" text (Divi Booster v2.7.0) or under Header > Main Header > Change centered menu "Select Page" text (Divi Booster v2.2.9 – v2.6.9):
Simply check the box, enter your new text (or leave blank to get rid of the text) and save.
The result will be a menu which looks something like this:
Is there a way you know of to make the mobile menu show a certain page first? I want to show a Purchase page and then of course you would see the other menu items if you touch it, but instead of the hamburger menu, one that looks more like the search bar, but with a specific page showing first on the menu?
Thank you.
Lynn
Hi Lynn, so am I right in thinking what you want is something akin to the first image in this page, but with the "Select Page" text replaced by a link to your Purchase page? If so, can you let me know which header layout you're currently using (default, centered, etc)? But if I've misunderstood, please let me know! Thanks.
Hi there, it worked perfectly for me. I just want to know how can hide the gray field and center the menu?
Thanks in advance.
Hi Florencia, I've just written a couple of quick posts that should hopefully help you hide the gray field and center the menu:
I hope that helps, but let me know if not.
Hi! This works great! However I would like to get rid of the darker field in front of the menu all together, so only the hamburger is showing, nothing next to it. Does anyone know how to do this?
Thanks A lot!
// Sessan
Hey Sessan, I've just put up a post on how to change the color of this darker field:
https://divibooster.com/change-the-centered-menu-select-page-background-color/
As I mention in the post, you can hide it by setting the color to be fully transparent. Hope that helps!
Didn't work for me…
Hey Yoli, if you are able to send me a link to the site you're working on I'll see if I can spot the problem. Thanks.
where do you add the CSS?
Hi james, you can add the CSS into the "Divi > Theme Options > General > Custom CSS" box. This post explains in a bit more details / gives some other options:
https://divibooster.com/adding-css-to-the-divi-theme/
Hope that helps!
can you have the "select page" change to the name of the page itself, like "About" if they are on that page?
Hi Sadie, you should be able to do it with this modified version of the code above:
add_filter('gettext', 'change_select_page_text', 20, 3); function change_select_page_text($text, $orig, $domain ) { if ($domain == 'Divi' and $orig == 'Select Page') { $title = get_the_title(); $title = empty($title)?'Select Page':$title; return $title; } return $text; }It will use the page / post title, or if this is empty display the default 'Select Page' text.
Removing / Changing the “Select Page” Text with Divi Booster
Does not work with Divi Version: 3.0.69
and the latest version of DiviBooster
Hi Mike, I just checked this on my test site and it still seems to be working. Is there any chance you're able to send me a link to your site so that I can take a look?
Great job !
muy bueno sirve!