Smooth Update: Added 4 New Divi Header Templates (Free Download)
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
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 :)