Full-width headers with GenerateBlocks
Creating a full-width header with GeneratePress Premium and GenerateBlocks is very easy. Let’s get right on it!
Upload your logo and create your menus and header from the Customizer. In our example we are going to go to Appearance -> Customize -> Layout -> Header and select the Use Navigation as Header checkbox.
In this particular example, it would be nice to have the header merged with the site content so we need to create a header element that is going to allow us to achieve that functionality. Create a header element and select Merge from the Merge with Content dropdown. Don’t forget to set the Display Rules accordingly.
Now create a new page and insert a GenerateBlocks container. The GenerateBlocks container is very flexible. You can set it to expand 100% of the browser viewport width which will automatically set the Page Builder Container to Full Width. You can also easily set a Background Image. Why not also have our header occupy the full browser viewport height by setting Minimum Height to 100vh from the Spacing section. All settings are set from the right panel once you have the container element selected.