While the Divi Theme doesn't seem to have support for making the box layout main area overlap the header navigation bar, we can achieve the effect quite easily.

Here's what the result will look like:

To achieve this effect, first disable the fixed navigation bar in the ePanel (under General Settings), and put Divi into Boxed Layout mode (under Appearance > Customize > Theme Settings).

Now add the following CSS to Divi:

@media only screen and ( min-width: 1200px ) {

    /* Remove the current box shadow */
    #page-container, #main-header { 
        -moz-box-shadow: none !important; 
        -webkit-box-shadow: none !important; 
        box-shadow: none !important; 
    }
	
    /* Add box shadow to just the main area instead */
    #et-main-area { 
        position:relative; 
        -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); 
        -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); 
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); 
    }

    /* Push the header behind the main area */
    #main-header { 
        z-index:0; 
    }
	
    /* Set a height for the new header area */
    body {
        padding: 0px;
        height:120px; 
    }
	
    /* Set the same background color on the new header area and original header */
    body, #main-header { background-color: #89d7d7 !important; }
	
    /* Set the background color for the rest of the page */
    html { background-color: #fafafa !important; }	

}

The CSS removes the shadowing from the header bar and creates a new header area which comes down lower that the current header. By giving both of these areas the same background color, they appear to blend into a single area which extends below and behind the main area.

Note that the effect only shows on full size screens. For smaller screens the default Divi layout is used.