In WordPress Using Elegant Theme’s Divi Theme, Long menus don’t show

The fix requires some javascript.

You can either add the javascript to a child theme using the wp_enqueue_scripts hook, or you can add the javascript directly to your theme options in the ePanel. (To add it to the ePanel, go to your ePanel and click on “Integration”, and add the following code to the the head of your blog.

The following code is heavily commented so that you coders out there can easily follow what’s going on and how it works. If you find any issues with it, please let me know.

<script type="text/javascript">

// Once the document is ready, execute this code
jQuery(document).ready(function(e) {
    'use strict';

    // Set the jQ var to jQuery.
    // You could also use $, but I use jQ... just my preference.
    var jQ = jQuery;

    // Execute the function that fixes the menus
    fixDiviMenus();

    // And whenever the window is resized, re-apply the fixes.
    jQ(window).resize(function() { fixDiviMenus(); });

});

// This variable simply holds a timeout integer.
// It is used so that we don't continually apply the fixes
// over and over as the window is being resized.
var ClFixTimeout;

// This function sets a timeout that fixes the menus
// We set a timeout so that we don't continually apply the fixes
// over and over as the window is being resized.
function fixDiviMenus() {
    "use strict";

    // If the timeout has already been created, clear it
    if (ClFixTimeout) { clearTimeout(ClFixTimeout); }

    // Wait half a second before applying the fixes
    ClFixTimeout = setTimeout(function() { applyDiviMenuFix(); }, 500);
}