This SaaS Mega Menu Header Template for Divi 5 provides a ready-made responsive header for SaaS, software, technology, and other business websites.
The template includes three desktop mega-menu layouts, a separate mobile navigation layout, account and call-to-action buttons, link badges, and responsive adjustments for tablets and phones.
Note: This is a Divi 5 header template (not compatible with Divi 4) and requires Divi MadMenu v2.4.0 or newer.
Header Template Preview
Table of Contents
What’s Included in the Template
The desktop header includes three differently structured mega menus:
- Product: Two link groups with badges, action buttons, and a featured visual section
- Solutions: A three-column layout organized by team, use case, and business type
- Resources: Icon-based navigation links and a featured guide download
A separate responsive layout is included for tablets and phones. It uses accordion submenus and includes account access, a guide download button, and a primary call-to-action button.
Download and Import the Template
Log in to your Divicio.us account and download the Divi MadMenu header templates pack.
After extracting the ZIP file, open the Divi 5 Only directory, then open the Mega Menu 2 folder and locate the JSON file for the SaaS header template (DiviMadMenuMegaMenu2.json file).
To import the template, go to Divi → Theme Builder and click the portability icon in the top-right corner. This will open the Import & Export Templates modal.
In the Import & Export Templates modal, click the Import tab and:
- Select the SaaS header template JSON file.
- Uncheck the additional import options unless you specifically need them.
- Click the Import Divi Theme Builder Templates button to import it.
For more information about this process, see the guide on importing Divi Theme Builder templates.
Things to Check After Importing
After importing the template, review the following settings before replacing the demo content.
Enable the Tablet Wide Breakpoint
The mobile header includes alignment adjustments for Divi 5’s Tablet Wide breakpoint.
If this breakpoint is not enabled on your website, enable it in the Divi 5 toolbar at the top of the builder.
Review Your Site Defaults
The appearance of imported layouts can be affected by the default settings already configured on your website.
For example, a site-wide default bottom margin may change the spacing between header elements that do not have an explicit margin set in the template.
Review any visible differences after importing and adjust the affected module or default values as needed.
How the Header Is Built
The desktop mega menus are created with Divi 5 Group, Link, and Dropdown modules nested inside the MadMenu module.
Divi MadMenu provides the main header structure, logo, action buttons, responsive controls, mobile navigation, and additional controls for the Link and Dropdown modules.
The mobile version uses a simplified navigation structure designed for smaller screens rather than reproducing the full desktop mega-menu layouts.
Semantic Navigation Markup
The template assigns semantic HTML elements to the main navigation and its menu groups.
The outer navigation wrapper uses the <nav> element. Groups containing menu items are configured as unordered lists using <ul>, while the individual menu links inside those groups use list item markup with <li>.
A similar list structure is used within the dropdown content, where menu headings and links are grouped according to their role in the navigation.
These element types are configured in the relevant modules under Advanced → HTML. When replacing, duplicating, or reorganizing modules, review these settings so the intended navigation structure is preserved.
Add Your Content
After importing the template, open the header template in Divi Builder and replace the demo content with your own.
Start by opening the MadMenu module settings. Under Content → Logo, upload your website logo and set its destination URL.
Then replace the remaining demo content, including:
- Top-level menu item text and URLs
- Dropdown headings and menu links
- Account and call-to-action button text
- Button destination URLs
- Badge text
- Featured guide content
- Illustrations used in the Product and Resources mega menus
You can also remove any links, badges, buttons, or featured sections that are not needed for your website.
Customize the Header and Mega Menus
The template combines elements provided by the MadMenu module with native Divi 5 modules.
As a result, some parts are customized in the MadMenu module settings, while others are edited directly through the Group, Link, Dropdown, Icon, and other native modules used in the layout.
Customize MadMenu Elements
The logo and the two header action buttons are created with the MadMenu module’s Logo, Button One, and Button Two elements.
In the demo, these buttons are used for the Sign In/Sign Out action and the Start Free call to action.
Open the MadMenu module settings to change their content, links, appearance, spacing, and responsive behavior.
Customize the Mega Menu Layouts
The desktop dropdown layouts are built with native Divi 5 Group, Link, and Dropdown modules nested inside MadMenu.
Use the regular module settings to modify:
- Layout and column structure
- Typography
- Spacing
- Background colors
- Borders and shadows
- Dropdown dimensions
- Link content and URLs
- Images and other nested modules
Individual dropdown layouts can also be duplicated or reused elsewhere in the header.
Customize Dropdown Pointers
Each Dropdown module includes a pointer that visually connects the dropdown panel to its parent menu item.
The pointer can be enabled or disabled in the Dropdown module’s Elements settings. Its appearance can be adjusted under Design → Pointer.
Customize Link Badges
Several menu links include badges such as New, Beta, and Pro Deal.
To change a badge, open the Link module and edit the Content → Badge Text field. Badge colors, typography, spacing, and other appearance settings are available under Design → Badge.
To remove a badge, clear the Badge Text field.
Link badges for the Divi 5 Link module are available in Divi MadMenu v2.4.0 and newer.
Customize the Mobile Menu
The mobile menu toggle is created using a nested Icon module. The menu panel itself uses a Dropdown module containing the MadMenu Vertical Menu module.
Accordion-style collapsing submenus are enabled by default. To use sliding submenus—a drilldown menu—instead, go to Content → Menu → Submenu Style in the Vertical Menu module and select either the Slide Right or Slide Left option.
Two Link modules below the navigation are styled as action buttons. You can edit these links, remove them, or replace them with Divi Button modules.
Using the Template
Once the demo content has been replaced, review the header at each enabled breakpoint and adjust its colors, typography, spacing, and dropdown dimensions to match your website.
The complete header can be used as imported, or individual dropdown layouts can be copied and adapted for another Divi MadMenu header.
To build a mega menu manually instead, see the step-by-step guide on creating a mega menu in Divi 5 with native modules.
0 Comments