Making the Divi Box Layout Overlap the Header

This post may contain referral links which may earn a commission for this site

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:

divi theme main area overlapping the header bar

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.

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

  1. I've found that when any Google Translate plugins are running (I've tried three different ones), the point where the header background colour meets the body background colour gets pushed right down near the bottom of the screen. Is there anything that can be modified in the code to prevent this? Examples of the translate plugins are Google Language Translator, Google Website Translator by Prinsa, and GTranslate. They all have the same problem.

    Reply
    • Hey Dan, how odd. I've just tried the plugins out and don't get that problem, so there must be some difference in our setups. Is there any chance (if it's not to disruptive to your site) that you'd be able to send me a link to your site with one of these plugins enabled so that I can take a look? If it makes things look better, feel free to set the header and body backgrounds to the same color – I'll be able to figure out what is what. Thanks!

      Reply
  2. Thank you! This had been a problem for me for so long and this CSS cleared it up immediately. I used it with box layout disabled and it worked just fine.

    Reply
  3. Thank you so much!

    Reply

Submit a Comment

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