Create Better Divi Headers

Smooth Update: Added 4 New Divi Header Templates (Free Download)

by | Aug 29, 2023 | 2 comments

The Smooth Divi Headers Templates Pack has just been updated with 4 new header templates.

With this update (v1.2), the total number of the available header templates now stands at seven, and the headers pack can be downloaded for FREE!

Table of Contents


Main Features

The primary highlight of the new header templates is still the smooth submenus effect designed specifically for desktop navigation submenus. You can learn more about the effect here.

For mobile menus, the templates incorporate collapsed submenus, ensuring a user-friendly experience. These templates also include social icons, a compelling call-to-action button, and a clean, modern design that remains visually appealing across all devices.

How to download and start using

The Smooth Divi Header Templates Pack is available for download on Divi Marketplace.

All new headers are Divi Theme Builder templates, so, they should be imported as the new templates directly into the Theme Builder.

Please follow this guide for more details about how to import new templates into the Divi Theme Builder.

How to customize

After importing the header templates into the Theme Builder you can start editing them like any other Divi template using the Divi Builder elements’ settings.

The header templates also use some custom CSS and JS which add different features to the headers.

If you want to edit the custom code you can locate it in the Code modules included in the layout.

Just switch to the Wireframe mode and find the Code modules labeled accordingly and apply your changes there.

Possible issue with icons and how to fix it

You may encounter an issue with the icons displaying incorrectly: the open mobile menu toggle icon (the “X” icon) as well as the arrow icons of the mobile menu parent items.

This issue is happening due to a bug in Divi portability which is altering the icon codes in the custom CSS that iclude a “\” character (it simply gets removed) during the import process.

To fix the icon issue open the header template, locate the Code modules that contain the custom CSS and apply the following changes:

1. The open mobile menu icon (the “X” icon) code is “\4d”, you can fix it in the Code module labeled “Code – CSS”.

2. The mobile menu parent menu item up and down arrow icon codes are “\42” and “\43” respectively. You can fix these icons in the Code module labeled “Code – Collapse Mobile Submenus CSS & JS”.

Upgrade your Divi website header now!

These brand new Divi header templates are available for download for FREE! You can download the Smooth headers pack and start using the headers right away.

And the best part? No plugins required! These header templates utilize Divi Builder elements such as sections, rows, columns and modules, along with some custom CSS and JS.

So, download the headers pack and upgrade your Divi website header effortlessly now :)

View Live Demos & Get Divi MadMenu

    Download FREE Divi Sections

        Subscribe To Our Newsletter

        Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

        You have Successfully Subscribed! Please confirm your email address.

        Divi MadMenu Coming Soon!

        Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

        You have Successfully Subscribed! Please confirm your email address.

        Get FREE Divi Layouts

        Download 20+ Divi templates for FREE!

        You have Successfully Subscribed! Please confirm your email address.

        Black Friday Is Coming!

        Subscribe to get notified when our BIGGEST SALE starts!

        You have Successfully Subscribed! Please confirm your email address.

        Cyber Monday Is Coming!

        Subscribe to get notified when the SALE starts!

        You have Successfully Subscribed! Please confirm your email address.