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.

Use Navigation as Header option
Use Navigation as Header option in the Customizer

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.

Header - Merge with content
Header – Merge with content
Header - Display Rules
Header – Display Rules

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.

GenerateBlocks container - Full width
GenerateBlocks container – Full width
GenerateBlocks container - Background Image
GenerateBlocks container – Background Image
GenerateBlocks container - Spacing
GenerateBlocks container – Spacing

Finally, go crazy with your header design to create an engaging experience for your users. Here is the final result!