In this part of the Divi 5 Mastery Course, you'll build a custom header and navigation in the Theme Builder for the coworking website. Using Flexbox settings, the Design Variables and presets from earlier parts, and the Interactions system, you'll create a responsive, global header that includes an announcement bar, logo, main navigation menu, social media links, and a call-to-action button.

Why build a custom header

The default Divi header and the Menu module are useful starting points, but a custom header built in the Theme Builder gives you more control over layout, styling, responsiveness, and behavior. You can create sticky headers, build custom navigation structures, use semantic HTML where appropriate, and decide exactly how the header changes across breakpoints.

Divi 5 also gives you more menu-building options than a single Menu module. You can use the Menu module for speed, which this tutorial does, or build more advanced navigation with Link modules, Menu Loops, Dropdown modules, and Interactions when a project calls for it. Reusing the presets and Design Variables from earlier parts keeps the header matched to the homepage, and updating a shared preset or variable later flows those changes through the header automatically.

Open the Theme Builder

In your WordPress dashboard, go to Divi → Theme Builder.
Under the Default Website Template, click Add Global Header. If you are starting from an existing placeholder, choose the option to build or edit the Global Header.

This opens the Visual Builder with a canvas dedicated to the header layout.

Build the header structure

This foundation gives the navigation a clean, flexible structure using Divi 5's Flexbox controls and the design system you already created.

Row settings

Add a single-column Row to the Canvas.
In the Content tab, expand the Background option group and apply the Primary Color variable to the background field.
Switch to the Design tab, expand the Layout option group, and set Justify Content to Center.
Expand the Sizing option group. Set Width to 100% and Max Width to None.
In the Spacing option group, use the Insert Dynamic Content icon to add the Spacing - XSmall variable to the top and bottom Padding fields.

Column settings

In the Row's Content tab, expand the Elements option group, locate the Column, and click its edit icon.
Open the Column's Design tab and expand the Layout option group.
In the Horizontal Gap and Vertical Gap fields, insert the Spacing - XSmall variable using Divi's dynamic content options.
Set Align Items to Center.

Next, add a second single-column Row to the Section and:

Go to the Design tab and expand the Layout option group.
For the Horizontal Gap and Vertical Gap, set the Spacing - XSmall variable t
Set the Align Items to Center.

Edit the Column's settings in the second Row and:

Go to the Design tab.
Expand the Layout option group.
For the Vertical Gap field, choose the Spacing - XSmall variable.
Set the Layout Direction to Row.
Set Justify Content and Align Items to Center.
Set Layout Wrapping to Wrap.

Section settings

Click into the Section, go to the Design tab, and expand the Layout option group. Set Vertical Gap to 10px.
Expand the Spacing option group. In the Top Padding field, select the Border Width - Buttons variable to set top padding to 0px. In the Bottom Padding field, select the Spacing - XSmall variable, which adds 10px.
Go to the Advanced tab and expand the Position option group. Set the Z Index field to 999 so the header stays above page content when it becomes sticky.
Expand the Scroll Effects option group, open the Sticky Position dropdown, and select Stick to Top.

Add the announcement bar

Divi 5 - Header Row top Heading module Settings

In the first Row, click the black + icon to add a Heading module.
In the Heading module settings, click the Assign Presets button next to the module header and choose the Subheading element preset.
Go to the Design tab and expand the Heading Text option group. Click into the Heading Text Color field and choose White from your global colors.

Set up the navigation foundation

In the second Row, add a Group module to keep the main header elements aligned and spaced.

Click the black + icon in the second Row and add a Group module.
When the Insert Module or Row modal appears, add an Image module inside the Group.
In the Image module's Content tab, expand the Image option group.
Hover over the Image field, select the Insert Dynamic Content icon, and choose Site Logo.
In the Design tab, expand the Sizing option group and set Max Height to 50px.

⚠️ Note: If you have not assigned a logo in Divi → Theme Options, you can do that after the header is built.

Add the Menu module

The Menu module handles the main navigation links quickly and connects to a WordPress menu.

Add a Menu module to the Group.
If you have already created a menu in the WordPress dashboard, select it in the Menu module's Content tab under the Menu option group. If not, create it later and return to this setting.
In the Menu module header, click the Assign Presets icon and choose Dark Text.
(optional) Since the Image module already provides the logo, expand the Logo option group and click the delete icon to remove the Menu module's built-in logo.

Next, adjust the Group module's Flexbox settings:

Click into the Group and open the Design tab. Expand the Layout option group and assign the Spacing - XSmall variable to the Vertical Gap field.
Set Layout Direction to Row, Justify Content to Space Between, Align Items to Center, and Layout Wrapping to Wrap.
Expand the Sizing option group. In the Size field, enable Grow to Fill, and set Alignment to Stretch.

Add social links

Add a Social Media Follow module to the navigation area, outside the Group module.
In the Content tab, expand the Elements option group and add your Social Networks.
Click the Assign Presets icon in the Social Media Follow module, and choose Isolated Icons - Dark.
Edit each Social Network item in the Elements option group:
1. Click its edit icon,
2. Click Assign Presets,
3. And select No Background.

Add a CTA button

Add a Button module to the navigation area.
In the module header, click the Assign Presets icon and select the Filled - Black preset.

Control the header with Interactions

With the elements styled, use the Interactions system to control how the header behaves across breakpoints. Here, you'll hide the social icons and CTA button on smaller screens while keeping the logo and menu visible.

Select the Social Media Follow module
Go to the Advanced tab.
Expand the Interactions option group and click + Add New Interaction.
Choose Breakpoint Enter as the Trigger Event.
Set the Breakpoint to Tablet,
Choose Hide Element as the Effect Action
Select the Social Media Follow module as the Target Module.
Click + Add New Interaction again and select Breakpoint Enter.
Set the Breakpoint to Desktop and choose Show Element, keeping the same Target Module.
Create two more Interactions for the Button module: one to show it on Desktop, and one to hide it at the Tablet breakpoint and below.

⬇️ Download Files

The Theme Builder Header layout.

Test responsiveness

Even with Design Variables, presets, and Flexbox settings, test how the header behaves across screen sizes. Divi 5 gives you two tools for this.

Customizable Responsive Breakpoints: Use the default active breakpoints or enable additional ones for more precise control over when the social links and CTA button hide and when spacing tightens. Access Customizable Responsive Breakpoints from the Top Bar.
Responsive Editor: The Responsive Editor lets you edit values across enabled breakpoints inside the Visual Builder. Hover over a responsive-supported field to reveal the Edit Responsive Values icon, then move through each breakpoint to edit values in context.

Tips and best practices

Preview in context: Click the Builder Settings icon in the Builder Bar and turn on Show Theme Builder Layouts to see the header above real page content while you adjust spacing, alignment, and colors.
Global vs. specific headers: This tutorial creates a Global Header that appears site-wide, which is the best starting point for most sites. Later, you can create more specific Theme Builder templates when certain pages or post types need a different header.
Export header templates: Export your Theme Builder templates or header layout from the Theme Builder interface as a backup, making it easier to restore the header, move it to another site, or share it with a team member.

Import the ready-made template

A JSON file is available so you can import the finished header. Before importing, it is best to define a WordPress menu in Appearance → Menus, though you can assign the menu later.