Remove “Select Page” Text from Divi’s Mobile Menu

Last modified Sep 5, 2022
Difficulty Beginner
Language CSS

If you set your Divi Menu centered, you will see on your Mobile by default “Select Page” before your menu bar. Use this CSS snippet to hide it.

 

CSS

#et_mobile_nav_menu span.select_page {
    display:none;
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.0.5 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

____

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, November 7, 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

13 Comments

  1. House Music Blog

    Still works for me! Thanks!

    I didn’t like the menu icon beneath the main logo either, it looks way better in-line with it, so I also added this CSS:

    . et_header_style_split #et_mobile_nav_menu {
    margin-top: -40px;
    margin-bottom: 5px;
    }

    Here’s my site for reference: https://www.housefiremag.com/

    Reply
  2. Alistair

    Hi when I do this it leaves a grey bar in the place of “Select Page”. I have tried a couple different lines of code and had no luck…Anyone able to help fix?

    Thanks

    Reply
  3. Ness

    Perfect…. thank you!! I spend ages trying to get rid of that 🙂

    Reply
    • Joshua

      Glad we could help 🙂

  4. Mindee Forman

    Great code, thanks! I had issues with my hamburger menu being at the very bottom of my header, so added this code to put a bit of space:

    div#et_mobile_nav_menu {
    padding-bottom: 10px;
    }

    Reply
  5. Mindee Forman

    Thanks so much for this code! It removed “Select Page” perfectly, but it made the hamburger menu REALLY close to the bottom of my header. How would I increase the padding there by 5px or so?

    Reply
  6. Jose Vieitez

    Anna’s suggestion was very helpful, though it left the hamburger menu showing, So I also added this CSS:

    #et_mobile_nav_menu span.mobile_menu_bar {
    display:none;
    }

    Reply
  7. Morad Bensaoud

    Hi, thanks for the snippet.
    -> Probably an oversight, but this should be marked as CSS, not Javascript.

    Reply
    • Anna Kurowska

      Fixed 🙂 thank you!

  8. Jacob

    The phrase “SELECT PAGE” is removed; however, the grey background that was behind that phrase is still visible and unsightly.
    Any way to remove this too?

    Reply
    • Anna Kurowska

      Try adding this CSS:

      @media (max-width: 980px) {
          .et_header_style_centered #main-header .mobile_nav {
              background-color: transparent!important;
      }
      } 
  9. carla

    Muchas gracias!!!

    Reply

Submit a Comment

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

Receive notifications about our new blog posts.

Next snippet Change the "Select Page" text in Divi's Mobile Menu
Previous snippet Supercharge Divi’s Call to Action Module Using CSS