(202) 750-1910
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
0 Items
Ask the Egghead, Inc.
  • Home
  • About
    • Reviews
    • Awards
    • Careers
    • Partners
    • Systems Status
  • Services
    • Website Design
    • Managed Hosting
    • Accessibility Compliance
    • Content Builder
    • Multi-Language Websites
    • SEO
    • Social Media
    • Premier Property Promotion
    • Reputation & Review Management Services
    • Low Code/No Code Solutions for MVP Development
    • Citation Builder
    • Pricing
    • Get A Quote
  • Portfolio
  • Website Audit
  • Blog
  • Invest Local
  • Contact
Select Page

How to Build a Global Header with Divi’s Fullwidth Menu Module

The header is one of the most important elements of any website and is central to the user experience. The navigation menu gives your users an idea of what they can expect to find on your website and helps them locate the information they need. Additionally, a secondary menu bar can be a great space to highlight a call-to-action or to promote an offer. Not to mention, the header is one of the most prominent parts of your website because it typically appears on every single page. It is a great opportunity to showcase your branding and create a header that is cohesive with the design of the rest of your website.

Divi’s Theme Builder options allow you to create a custom global header and customize the look of your header and menu modules across your entire website. In this tutorial, we will show you how to build a global header using Divi’s fullwidth menu module.

Let’s get started!

Sneak Peek

Here is a preview of the global header we will design.

Divi Global Header With Fullwidth Menu

Divi Global Header With Fullwidth Menu Mobile

Divi Global Header With Fullwidth Menu Mobile Expanded

What You Need to Get Started

Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.
Now, you are ready to start!

How to Build a Global Header with Divi’s Fullwidth Menu Module

Open the Theme Builder

Since we are building a global header in this example, let’s navigate to the theme builder, which you can find under the Divi menu in WordPress. Select Add Global Header, then select Build Global Header.

Divi Global Header With Fullwidth Menu Build Global Header

Create the Secondary Menu Bar

When you first open the global header layout, it will come preloaded with a regular section. We will modify this to be our secondary menu bar, which will sit above our fullwidth menu and include some call-to-action text and a button.
First, open the section settings and add the background color.

  • Background: #92a8a1

Divi Global Header With Fullwidth Menu Background Color

Next, remove the padding from the section.

  • Padding-top: 0px
  • Padding-bottom: 0px

Divi Global Header With Fullwidth Menu Remove Padding

Now insert the row. For this design, we will use the row layout shown below.

Divi Global Header With Fullwidth Menu Insert Row
In the row settings under Sizing, equalize the column heights.

  • Equalize Column Heights: Yes


Next, set the top and bottom padding.

  • Padding-top: 5px
  • Padding-bottom: 5px

Divi Global Header With Fullwidth Menu Add Row Padding

We want the items in our secondary header to be vertically aligned, so let’s add some custom CSS to the row’s main element.

align-items:center;

Divi Global Header With Fullwidth Menu Custom CSS

Now our row is set up and we can add the modules for our content. Insert a text module on the left side.

Divi Global Header With Fullwidth Menu Insert Text Module

Modify the text content. This is a great place to include a CTA (call-to-action) or to promote an offer.

  • Text: “Sign up for our mailing list to receive 10% off your order!”

Divi Global Header With Fullwidth Menu Modify Text

Navigate to the design tab of the text module and set the text font, weight, and color.

  • Text Font: Poppins
  • Text Font Weight: Medium
  • Text Color: #FFFFFF

Divi Global Header With Fullwidth Menu Text Settings

Next, add the button module to the right.

Divi Global Header With Fullwidth Menu Insert Button

Add the button text,

  • Text: “Get a Free Quote”

Divi Global Header With Fullwidth Menu Button Text

Under the design tab, set the button alignment to center.

  • Button Alignment: Center

Divi Global Header With Fullwidth Menu Button Alignment

Now we can customize the look of the button.

  • Custom Styles for Button: Yes
  • Button Text Size: 14px
  • Button Text Color: #FFFFFF
  • Button Background: #2F5349

Divi Global Header With Fullwidth Menu Button Settings

  • Button Border Width: 0px
  • Button Border Radius: 50px
  • Button Letter Spacing: 1px
  • Button Font: Poppins

Divi Global Header With Fullwidth Menu Button Settings

Add the Fullwidth Menu Module

Now that the secondary menu is designed, we can move on to the primary menu. We will be building the menu using the fullwidth menu module. Add a new fullwidth section to the global header.
Divi Global Header With Fullwidth Menu Insert Fullwidth Section

Select and insert the Fullwidth Menu module.

Divi Global Header With Fullwidth Menu Add Fullwidth Menu

Next, we will customize the fullwidth menu settings.

  • Active Link Color: #2f5349
  • Menu Font: Poppins
  • Menu Font Weight: Semi Bold
  • Menu Font Style: Capitalized (TT)
  • Menu Text Color: #000000

Divi Global Header With Fullwidth Menu Font Settings

  • Menu Text Color on Hover: #2f5349
  • Menu Text Size: 15px
  • Menu Letter Spacing: 2px

Divi Global Header With Fullwidth Menu Text Settings

Next, edit the dropdown menu options.

  • Dropdown Menu Line Color: #2f5349
  • Dropdown Menu Active Link Color: #2f5349
  • Mobile Menu Background Color: #FFFFFF

Change the hamburger menu icon color to black.

  • Hamburger Menu Icon Color: #000000

Divi Global Header With Fullwidth Menu Hamburger Menu Icon Color

Before we add the logo to our menu, let’s modify the sizing options. We will use Divi’s built-in responsive options to set a different Max Height for desktop and mobile.

  • Logo Max Height on Desktop: 3vw

Divi Global Header With Fullwidth Menu Logo Height Desktop

  • Logo Max Height on Mobile: 6vw

Divi Global Header With Fullwidth Menu Mobile Logo Height

Now add your logo to the fullwidth menu.

Divi Global Header With Fullwidth Menu Add Logo

Finally, we want the primary menu to stick to the top of the screen as the user scrolls through the website, so we’ll use Divi’s built-in sticky settings for this.

  • Sticky Position: Stick to Top

Divi Global Header With Fullwidth Menu Sticky Settings

With that, the design of our global header is complete!

Create a New Page with a Premade Layout

To see the header and fullwidth menu in action, let’s create a new page with a premade layout from the Divi library. For this design, we will use the Flooring Home Page from the flooring layout pack.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

Divi Global Header With Fullwidth Menu New Page

We are using a premade layout from the Divi library for this example, so select Browse Layouts.

Divi Global Header With Fullwidth Menu Browse Layouts

Search for and select the Flooring Home Page layout.

Divi Global Header With Fullwidth Menu Find A Layout

Select Use This Layout to add the layout to your page.

Divi Global Header With Fullwidth Menu Use Layout

Now the design is complete!

Final Result

Let’s take a look at the final design for our global header.
Divi Global Header With Fullwidth Menu Divi Global Header With Fullwidth Menu Mobile Divi Global Header With Fullwidth Menu Mobile Expanded

Final Thoughts

As we have discussed, the header and navigation menu is central to the user experience of your website. Now you have seen how easy it is to design a great-looking global header with Divi’s fullwidth menu module. Thankfully, Divi’s theme builder gives you control over every aspect of your website’s menu and header, and you can create totally custom and unique designs with just a few clicks. If you are interested in more header tutorials, check out this collection of 30+ Helpful Divi Header Tutorials!

Have you used Divi’s global header options to customize your header and navigation menu? We would love to hear your thoughts in the comments!

The post How to Build a Global Header with Divi’s Fullwidth Menu Module appeared first on Elegant Themes Blog.

Recent Posts

  • No Leads? Here’s Why (And How to Fix It)

    No Leads? Here’s Why (And How to Fix It)

  • 7 Website Mistakes That Hurt Your Business

    7 Website Mistakes That Hurt Your Business

  • How AI Helps Us Help You

    How AI Helps Us Help You

  • Future-Proof Your WordPress Site in 2025

    Future-Proof Your WordPress Site in 2025

  • Why You Need Managed WordPress Hosting from Ask the Egghead

    Why You Need Managed WordPress Hosting from Ask the Egghead

  • Your Website Is More Than Just Curb Appeal

    Your Website Is More Than Just Curb Appeal

  • Top Website Mistakes That Hurt Your Business

    Top Website Mistakes That Hurt Your Business

  • Plugin of the Week: WPForms Made Simple

    Plugin of the Week: WPForms Made Simple

  • SEO Simplified: Boost Your Website Without Tech Skills

    SEO Simplified: Boost Your Website Without Tech Skills

  • Find Your Perfect Website Style

    Find Your Perfect Website Style

Awards

  • Clutch Top Web Design Company Medical Websites 2024

    Clutch Top Web Design Company Medical Websites 2024

  • Clutch Top Web Design Company Government Websites 2024

    Clutch Top Web Design Company Government Websites 2024

  • UpCity National Excellence Winner 2024

    UpCity National Excellence Winner 2024

  • UpCity National Excellence Winner 2023

    UpCity National Excellence Winner 2023

  • UpCity National Excellence Winner 2022

    UpCity National Excellence Winner 2022

  • UpCity Local Excellence Washington DC 2021

    UpCity Local Excellence Washington DC 2021

  • UpCity Top Designer 2021

    UpCity Top Designer 2021

  • DesignRush Accredited Agency 2021

    DesignRush Accredited Agency 2021

  • Clutch Top Company Washington DC 2021

    Clutch Top Company Washington DC 2021

  • Digital.com Best SEO Firms Washington DC 2021

    Digital.com Best SEO Firms Washington DC 2021

Ask-the-Egghead-logo

Capability Statement

View/Download

Ask the Egghead

200 Massachusetts Ave NW
8th Floor Suite 133
Washington, DC 20001
(202) 750-1910

Ask the Egghead

399 Boylston Street
Suite 685
Boston, MA 02116
(617) 221-8300

Quick Links

  • Website Design
  • Social Media
  • SEO
  • Managed Hosting
  • Privacy Policy
  • Investors
  • Facebook
  • X
  • Instagram
Designed by The Egghead © 2015-2025 Ask the Egghead, Inc.