Changing the color of the mobile menu in Divi

 Unable to see your menu on mobile with the Divi Theme?

Please go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:

#main-header .mobile_menu_bar:before{

    color: white !important;


Remove the Select Page text from Divi mobile menu

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.

#et_mobile_nav_menu span.select_page {



Hide the navigation menu in DIVI

 Add this custom CSS code to your DIVI theme options page and it will hide the navigation menu links:

/* Hide the header navigation links */

#et-top-navigation { 

    visibility: hidden; 


/* Don't hide the centered inline logo */

#et-top-navigation .centered-inline-logo-wrap {

    visibility: visible;


How to prevent people copying content from your website

To disable the copy content on all pages of your website with CSS, just follow the steps below to add the CSS snippet to your main CSS style page.

  1. Open your website main css file (style.css or default.css)
  2. Add the below code to the top of the .css file.

body{-webkit-touch-callout:none;-webkit-user-select: none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} 

How to change the DIVI video module overlay image

If you use the overlay option in the video module and generated a thumbnail for the video, you will notice the play icon on top of that image as seen here:

However, if you want to change it, it can be done with a simple CSS code:

.et_pb_video_play:before {
a.et_pb_video_play {
    margin-left: 0 !important;
    left: 0;
    right: 0;

Add the code in Dashboard > Divi > Theme Options > Custom CSS field and you should see the new image.

Be sure to change the image link, the width, and the height of your image.