In this tutorial, you’ll learn how to create a Divi 5 header from start to finish. We’ll set up a global header and build a layout that includes a logo, navigation menu, and a call-to-action button, using only native Divi 5 features without relying on third-party plugins or custom code.

Once you understand this workflow, you can extend it with more advanced navigation features as needed.

If you’ve already upgraded from Divi 4 to Divi 5, or are starting a new Divi 5 site, this guide will help you start building headers.

Final Result

Here’s the header we’ll build in this tutorial:

This setup provides:

• a global header applied across your site
• a navigation menu managed through the Menu module
• a clearly visible call-to-action
• consistent behavior across different devices
• built using native Divi 5 features only

Table of Contents

1. Understanding How Headers Work in Divi
2. Step 1. Create the Header Template in Divi Theme Builder
3. Step 2. Building the Header Layout Structure
4. Step 3. Configuring the Navigation Menu
5. Step 4. Adding the Logo
6. Step 5. Adding the CTA Button
7. Step 6. Styling the Header
8. Step 7. Header Design Choices
9. Step 8. Checking and Adjusting Responsiveness
10. Step 9. Saving the Header Template
11. Conclusion

Understanding How Headers Work in Divi

In Divi, headers are created using the Theme Builder, which allows you to assign them globally or to specific parts of your website.

A header is essentially a layout that appears across your site wherever it has been assigned. Once created, it can be managed and updated from the Theme Builder.

Structurally, a Divi header follows the same layout system as regular Divi layouts:

Section → Row → Column → Modules

In this tutorial, we’ll use this basic structure to build a header that includes a logo, navigation menu, and a call-to-action button.

Step 1. Create the Header Template in Divi Theme Builder

First, decide whether your header should be applied globally or only to specific parts of your site. In this tutorial we’ll create a global header, which will be displayed across the entire website. Using a global header ensures consistent navigation across your entire site.

Go to Divi → Theme Builder and click Add Global Header. You will see two options:

1. Build Global Header
2. Add From Library

Since we’re creating the header from scratch, select Build Global Header.

This will open the Visual Builder, where you can start designing your header.

Before we begin building the layout, click the Exit button in the top-right corner to return to the Theme Builder interface.

You’ll now see that the global header template has been added. It appears in green, indicating that it is a global element.

Step 2. Building the Header Layout Structure

Now that the global header template has been created, click the Edit icon to start building the header.

A blank header layout starts with an empty section. Click the green plus button to add a row inside this section.

In the Insert Row modal, select a one-column row. We don’t need multiple columns, since we’ll use the Menu module as the main container for our header. This approach keeps the header structure simpler and makes it easier to manage all elements in one place.

After adding the row, the Insert Module Or Row modal will open automatically. Search for Menu and add the Menu module to the layout.

The Menu module will be added to the header. By default, it may display existing pages as menu items, or use a menu that has already been created under Appearance → Menus.

At this point, the basic header structure is in place. The Menu module will serve as the foundation for our header, allowing us to manage the logo, navigation, and additional elements in a single location.

Next, we’ll configure the navigation menu and start building the header elements step by step.

Step 3. Configuring the Navigation Menu

The Divi Menu module uses WordPress menus created under Appearance → Menus. If you haven’t created a menu yet, go there and create one.

Once your menu is ready, open the global header template again and select the Menu module. In the module settings, go to the Content settings and choose your menu from the Menu dropdown.

In this example, a menu with four top-level items is used, with two of them containing submenus.

The same menu is used for both desktop and mobile navigation, so there’s no need to create a separate menu for different devices.

With the navigation menu in place, we can now move on to adding the logo.

Additional Customizations

The Divi Menu module covers most basic navigation needs for desktop and mobile.

If you need more control, you can extend it with additional customizations. For example:

• How to collapse Divi mobile menu submenus
• How to close Divi mobile menu on outside click

To keep this tutorial focused, we’ll use only the built-in features of the Menu module without additional modifications.

Step 4. Adding the Logo

To add a logo, open the Menu module settings and go to the Content → Logo settings. In the Logo field, upload your logo image.

In this example, a white logo is used to ensure good contrast against the dark header background (we will set that later in this tutorial).

If your logo is relatively large, it’s a good idea to provide a smaller version for mobile devices. This helps keep the header compact and improves usability on smaller screens.

To do this, switch to the Phone view using the view mode icons in the Page Bar at the top of the Visual Builder. Then upload the mobile version of the logo in the Logo field.

Alternatively, you can hover over the Logo field and click the Edit Responsive Values icon that appears.

This will open the responsive settings of that field allowing you to set different values for each enabled device. Scroll to the Phone breakpoint and upload the mobile version of your logo.

With the logo in place, we can now move on to adding the call-to-action button.

Step 5. Adding the CTA Button

The call-to-action (CTA) button is the final element we’ll add to the header. It plays an important role by highlighting the primary action you want users to take on your site.

To keep the header structure simple, we’ll add the CTA button directly inside the Menu module using Divi 5’s Nested Elements feature. Placing the CTA inside the Menu module ensures it stays aligned with the navigation and behaves consistently across devices.

To do this, open the Menu module settings and go to the Content → Elements section. Click the Add Element button to add a new element inside the module.

This will open the Insert Module or Row panel, allowing you to choose which element to add. This works the same way as adding modules to a regular layout.

There are several ways to create a CTA, such as using a Button or Text module. In this example, we’ll use the Link module, which is designed for creating navigation items and works well inside menus.

Search for Link and click to add it into the Menu module.

The CTA element will now appear alongside the menu items inside the header.

At this stage, the layout is in place, but it still needs styling. Next, we’ll refine the appearance of the header to make it visually balanced and easy to use.

Step 6. Styling the Header

Now that the header structure is in place, we can style it to improve readability and visual hierarchy.

Header Background and Spacing

Start by setting the header background color.

Open the Menu module settings and go to Content → Background, then set the background color to #000000.

Next, add some spacing so the elements are not positioned too close to the edges.

Go to Design → Spacing and apply:

• Left & Right padding: 2%
• Top & Bottom padding: 4px

Using percentage-based padding helps the layout adapt to different screen sizes.

Logo Sizing

To prevent the logo from appearing too large, adjust its maximum width.

Go to Design → Logo → Sizing and set:

• Desktop: 180px
• Phone: 60px

Adjust these values based on the actual size of your logo.

Menu Styling

Now style the navigation menu for better readability.

Go to Design → Menu Text and apply:

1. Active Link Color – #ffcc00
2. Menu Font – Roboto
3. Menu Font Style – Uppercase
4. Menu Text Col​or – #ffffff
5. Menu Text Col​or (Hover) – #ffcc00
6. Text Alignment – Center

Dropdown Menu Styling

Next, style the dropdown and mobile menus.

Go to Design → Dropdown Menu and set:

1. Dropdown Menu Background Color – #000000
2. Dropdown Menu Line Color – #ffcc00
3. Dropdown Menu Text Col​or – #ffffff
4. Dropdown Menu Active Link Col​or – #ffcc00
5. Mobile Menu Background Color – #000000
6. Mobile Menu Text Col​or – #ffffff
7. Mobile Menu Text Col​or (Hover) – #ffcc00

Finally, set the hamburger icon color to white in
Design → Icons → Hamburger Menu Icon Color.

Styling the CTA Button

Open the Link module settings and set the following values:

Content

1. Text: Contact
2. Icon: any icon you see fit
3. Link: URL of the Contact page
4. Background Color: #ffcc00

Icon

Go to Design → Icon:

1. Icon Size: 15px
2. Right Margin: 6px

Text

Go to Design → Text:

1. Font: Roboto
2. Font Style: Uppercase
3. Text Alignment: Center
4. Text Color: #000000

Button Sizing and Spacing

To keep the button usable on smaller screens, adjust its size for mobile.

Go to Design → Sizing and set a max width for phone devices (e.g. 80px), but this is optional.

Then add padding in Design → Spacing → Padding. Adjust values as needed to keep the icon and text properly aligned across devices.

Final Adjustments

To align header elements vertically, go to:

Menu → Design → Layout → Align Items and select Center.

Then remove extra spacing from the header section, and adjust the row width:

• Section → Design → Spacing: set Top and Bottom padding to 0(zero)
• Row → Design → Sizing → Width: 100%

Step 7. Header Design Choices

Now that the header is styled, let’s briefly look at the design decisions behind it.

Color Scheme

This header uses a simple high-contrast color scheme:

• dark background
• light text
• bright accent color for the CTA

The dark background helps separate the header from the page content (unless the page content background is of the same color), while the yellow accent draws attention to the primary action.

Typography

Typography is kept clean and readable:

• regular font weight for menu items
• uppercase styling for more clarity
• consistent font across the menu and CTA

The goal is to make the navigation easy to scan without adding unnecessary visual complexity.

Layout and Spacing

The layout is simple and balanced:

• logo on the left
• navigation in the center
• CTA on the right

Spacing between elements prevents the header from feeling crowded, while percentage-based padding allows it to adapt to different screen sizes.

CTA Placement

The CTA button is placed inside the navigation to keep everything aligned and easier to manage.

Using a contrasting color helps highlight the most important action without disrupting the overall layout.

Adapting to Your Design

You can replace the colors, fonts, and spacing values used in this tutorial with your own brand styles while keeping the same structure.

Focus on maintaining clear contrast, readable typography, and balanced spacing to ensure the header remains easy to use across all devices.

Step 8. Checking and Adjusting Responsiveness

Divi automatically handles most responsive behavior for the Menu module, so the header already adapts to different screen sizes.

However, it’s still important to review how it looks across devices.

Use the device preview options in the Visual Builder to check the header on desktop, tablet, and phone (as well as any additional breakpoints you have enabled).

In this tutorial, a few adjustments were made to improve the mobile experience:

• a smaller logo is used on phone devices
• the CTA button is resized to fit smaller screens
• spacing is adjusted to keep elements from touching screen edges

If needed, you can further fine-tune padding, font sizes, or alignment for specific breakpoints.

Step 9. Saving the Header Template

After completing the final checks save the header layout and exit the Visual Builder.

At this point, the header template is ready, but it will not appear on the frontend until the Theme Builder changes are saved.

To apply the header across your site, click the Save Changes button in the top-left corner of the Theme Builder.

Once saved, visit different pages on your site to confirm that the header is displayed correctly.

Conclusion

You now have a clean and responsive header built with the Divi 5 Theme Builder, including a logo, navigation menu, and a call-to-action button.

This setup covers the full process from structure to styling and provides a solid foundation for your site’s navigation.

From here, you can extend it with more advanced features such as sticky headers, mega menus, or additional elements depending on your needs.