Trying to make theme dropdown menu OnClick instead of hover

Generally you should use classes that theme uses to manage showing and hiding menu in order to keep it compatible.

CODE RESPOSIBLE FOR HOVER MENU (custom.js):

var $et_top_menu = $( 'ul.nav' );$et_top_menu.find( 'li' ).hover( function() {    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {        $(this).addClass( 'et-show-dropdown' );        $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );    }}, function() {    var $this_el = $(this);    $this_el.removeClass( 'et-show-dropdown' );    setTimeout( function() {        if ( ! $this_el.hasClass( 'et-show-dropdown' ) ) {            $this_el.removeClass( 'et-hover' );        }    }, 200 );} );

HOW TO UNBIND TRIGGERING HOVER EVENT #1 (if you want to do this somewhere else after it is initialized in custom.js):

 $( 'ul.nav li' ).off("hover");

HOW TO UNBIND TRIGGERING HOVER EVENT #2 (if you want to modify custom.js right after the code):

$et_top_menu.find( 'li' ).off("hover");

HOW TO UNBIND TRIGGERING HOVER EVENT #3 (if you want to modify custom.js :

Just remove the code and replace it with your on click event code

HOW TO MAKE ON CLICK EVENT - if you want to leave previous hover code - past below the hover code or use it in your place - note it must be used after custom.js or inside after hover code:

$( 'ul.nav li' ).off("hover");$et_top_menu.find( 'li' ).click( function() {    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {        $(this).toggleClass( 'et-show-dropdown' );        $(this).toggleClass( 'et-hover' );    }});

The code i gave you has no anitmation so do it on your own. Simplest way is to use CSS for example:

<YOUR SELECTOR> {    -webkit-transition: all 0.5s ease;    -moz-transition: all 0.5s ease;    -o-transition: all 0.5s ease;    transition: all 0.5s ease;}

FIDDLE EXAMPLE - it turns off HOVER event and set up ON CLICK event.

http://jsfiddle.net/gwn9aqxs/2/

I added some CSS classes in order to keep it compatible with your theme css classes. I added "nav" classs to parent UL just like it in your theme and i added "mega-menu" class to li parent of ul.sub-menu just like in your theme.

The theme developer produced a result that produced the required result. The alteration to swap the functionality of the page navigation of DIVI is done in a file titled frontend-builder-scripts.js found in the DIVI folder directory /includes/builder/scripts/frontend-builder-scripts.js

To alter the hover to click swap the following code found on line 1074(Top line below) from .hover to .click.

$et_top_menu.find( 'li' ).hover( function() {     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {     $(this).addClass( 'et-show-dropdown' );     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );            et_menu_hover_triggered = true;}

to

$et_top_menu.find( 'li' ).click( function() {     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {     $(this).addClass( 'et-show-dropdown' );     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );            et_menu_hover_triggered = true;}