Most popular trend we have seen at the time is the “mostly” full-screen header– with its actual content of the page looking out at the bottom of the window, encouraging the audience to scroll. It was not only technically perfect, but it also looks really good. The problem is when you create the Divi full width header bigger than to the content within the header, this is all sitting up at the top, leaving a lot of horrible room at the lower part.
Below is a sample before and after to make verticall central content that to get the sense of what we’re going to do:
Before
Don't miss out on this amazing opportunity! Click the discount link now to save big on Divi Theme. But hurry, this offer is only valid for the next 24 hours. Don't wait until it's too late – click the link and get started on creating the website of your dreams with Divi Theme today!
After:
This piece of code will centrally vertical all content within the full width header and lets you can choose the ratio height of the full width header element as well.
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;Please ensure that’s in the Custom CSS Main Element section of the Full Width Header DIVI module.
