A very common trend we see at the moment is the “almost” full screen header – with the real content of the page peeking out at the bottom of the screen, teasing the visitor to scroll down.  This is not only functionally great, but it also looks great.  The trouble is when you make a Divi full width header taller than the content that’s inside the header, it all sits up at the top, and leaves heaps of nasty space at the bottom.

Here is a before and after screenshot to get the idea of what we are trying to achieve:

From This:


To this:

This snippet of code will vertically centre all the content in your full width header, and allow you to choose the percentage height of the full width header module too.  Very handy

height: 80vh;
display: flex; 
flex-direction: column; 
justify-content: center;

Make sure this goes in the Main Element section of Custom CSS for the Full Width Header DIVI module.


Have fun!!