Changing / Hiding the "Select Page" Centered Menu Text

This post may contain referral links which may earn a commission for this site

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:

Hundreds of new features for Divi
in one easy-to-use plugin

16 Comments

  1. 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

    Reply
    • 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.

      Reply
  2. 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.

    Reply
  3. 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

    Reply
  4. Didn't work for me…

    Reply
    • 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.

      Reply
  5. where do you add the CSS?

    Reply
  6. can you have the "select page" change to the name of the page itself, like "About" if they are on that page?

    Reply
    • 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.

      Reply
  7. Removing / Changing the “Select Page” Text with Divi Booster

    Does not work with Divi Version: 3.0.69
    and the latest version of DiviBooster

    Reply
    • 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?

      Reply
  8. Great job !

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *