How to create a unique header menu with Divi 5’s Flexbox layout system

Custom headers set your site apart, especially when millions of other websites are built with the same WordPress theme or template. This tutorial shows you how to create a custom header in Divi 5. You can download this header and 19 others if you want to study it or use it in your own builds.

Otherwise, this post provides a step-by-step guide about using Divi’s Flexbox formatting system to build this layout.

Here’s the main idea. A flex layout has two levels of control:

1. Parent containers define the direction, openings, circulation, and alignment for the entire layout.
2. Underlying items determine whether they grow, shrink, or have other size options.

Parental controls can be found under Design > Layout. Children’s sizing can be found under Design > Dimensions. First make sure the parent is right. Then choose layouts with child-level options.

Now the fun part: let’s recreate this layout step by step.

Step 1. Build the structure

When building a section layout, the first step is to determine the structure. Without knowing (or understanding) the structure, you’ll have a hard time getting things to line up. With practice this becomes more or less second nature.

To recreate this heading, there are a number of levels of structure to keep in mind. The first are the top layers: a section, with a row, and two columns in that row (we’ll worry about the layout details later, but for now pay attention to the structure.

Within that second column we see two nested rows. The first row contains one column for the menu and another column for the social icons.

There is another row with a single column that contains the search and button modules.

Now that we understand the structure, we can create a blank page with the raw elements needed. Add a section to your header template. Add an offset row structure with two columns.

Open the row, go to Design > Layout, and set the flex Horizontal distance to 2% and the vertical divide to 8px. Everything else should remain at default settings.

To further elaborate the structure, we add two nested rows in column 2.

At this point we finish adding the necessary columns and modules. Nested row 1 gets two columns, and nested row 2 gets just one column.

With the structure in place, we can now start fine-tuning the layout using Flexbox controls at each level.

I’ve designed all my modules so that we can focus solely on building them with Flex. Download the layout from the linked post above if you want the exact styles.

Step 2. Size column one for the logo

Select Column 1. Open Design > Dimensions. Make sure Column Class is displayed No column class. Go to the second column and set the column class to Full width.

Step 3. Column two layout settings

Select Column 2. Open Design > Layout. Confirm that the horizontal opening is displayed 30px, and the vertical opening is displayed 8px. Keep the layout direction as vertical stack and fill the contents by default. Finally, set Align Items to Center on the transverse axis.

Step 4. Within the first nested row, adjust the size of the columns

Select column 1 in nested row #1. Open Design > Dimensions. To elect Grow to fill and change Column Class to No column class. Select Column 2 and open Design > Dimensions to set the column class No column class and make sure that only Shrink to fit is selected. This causes the first column with the menu to take up most of the space, pushing the social icons to the right.

Step 5. Configure the column layout of the Utility Row

In nested row #2, find the single column and open Design > Layout. Set Horizontal Distance to 8px and set the Layout Direction to Row. You can also set Align Items to Center.

Step 6. Make sure the search module absorbs free space

There are three modules in this utility row. Open the search module. Go to Design > Dimensions and set it Grow to fill. Leave both buttons at their default size. The search now expands to fill the unused width in the column.

Step 7. Finish Styles

Open Nested Row #2 and give it a background color of #9bd252. Then open Edge Styles to add rounded corners clamp(20px, 3vw, 65px). Add last 8px filling around all sides.

To format the search module as in our example: set the Placeholder text to #ffffffthe text color of fields to #ffffffand set the button and border color to #9BD252. Additional, give it a limiting radius of 100 vh.

Then give it a “Search blog‘ placeholder and switch off the Show button.

We center the logo vertically by going to the parent column and setting Content Justification to Center.

Step 8. Finish with a responsive stride

Switch to tablet view from the top menu bar. If you don’t like that the hamburger menu isn’t on the right side, you can reorder the modules for better flow.

We can then resize the columns and adjust which column should grow to Fill. Switch to tabletcreate the column with the social icons Grow to filland adjust the Column Class No column class. Then go to the column with the Menu module, disable Grow to Fill, and set it No column class also.

Finally, there is still a lot of work to be done at the mobile breakpoint. Make sure the first nested row has a layout direction of Drive backwards (if it isn’t already) and make sure this is set to No cover.

Then we will adjust the column sizes again to set them both No column class and to have only the column with the social icons Grow to fill.

We could have done that completed this step above if we had used the Responsive Editor, which is a good reason to get familiar with it It. This allows you to adjust the same design settings for multiple breakpoints in a single view.

Finally, we split the utility’s nested row into two flexible rows by allowing this Wrap. Then make the search module a width of 100%. If you want, you can justify content to the Center.

Get all 20 Flexbox headers for free, including both standard and pre-styled versions. Each header is ready to import into your Divi library and use in the Theme Builder. Just download and start building.

You have been successfully subscribed. Check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Use this header as a starting point for your experiments. Add a sticky status for the desktop. Add an announcement strip above the main row. Try building this with a few containers by replacing some nested rows and their columns with groups.

Mastering Flexbox in Divi 5 takes some practice. There are practices you would use in a Block format that are not best practices in a Flex format. But you’ll gain a new universe of potential if you make the switch (if you’re ready).

Flex is just one of dozens of new features and improvements Divi 5 users are using today.