Free Download: Divi Header Template With Smooth Submenus Effect
The Divi Header Template with Smooth Submenus Effect is the new freebie now available with our Freebies Package.
This header template uses Divi Builder native modules with some custom CSS and JS used to implement additional functionality.
Here are the main features of the header template:
Smooth submenus effect for desktop menu
Collapsed nested menu items on mobile
CTA Button
Search icon
Responsive design
Divi Header Template Preview

How To Download
This header template is available to our verified subscribers only.
In order to download it you need to subscribe using the opt-in form below and confirm your email address.
After confirmation you will receive the Welcome email with the download link.
If you’ve already subscribed before then you don’t need to subscribe again, all our subscribers receive an email with the updated Freebies Package download link immediately after there is a new freebie released.
Requirements
The header template requires Divi v4.x .
Header Template Installation
After downloading the freebies file extract it and find the Divi Header Template with Smooth Submenus Effect folder containing this new header template JSON file.
Then go to Divi -> Theme Builder and import it as a new template. For more info about how to import new templates into the Divi Theme builder please check out this guide: How To Export and Import Divi Theme Builder Templates >>
After you’ve added the template you can start customizing it.
How To Customize
To start customizing the header template click the Edit icon:

Since this header template uses Divi Builder elements the general customization is done the same way as with any other Theme Builder template in the Builder interface.
However, this header template also uses custom CSS and JS that you may want to customize as well.

The custom code is added using three different Code modules for better organization of the code.
The Code module labeled Code – CSS contains general CSS used for this header template.
The Code module labeled Code – Smooth Submenus Effect CSS & JS contains the code for the smooth submenus effect enabled for the desktop menu submenus.
For more info about how this effect works please read this tutorial: Create The Smooth Submenus Effect For Divi Desktop Menu
And the last Code module labeled Code – Collapse Mobile Submenus CSS & JS contains the code for collapsing the mobile menu submenus, read this tutorial about how it works: How To Collapse Divi Menu Module Submenus And Keep Parent Links Clickable On Mobile
Final Thoughts
Just like our other header templates, this header template also comes with additional functionality that is not available natively in Divi: smooth desktop submenus, collapsed mobile menu nested items, and a CTA button.
Download it for FREE and start using in your projects, and feel free to leave your thoughts and suggestions in the comments section below.
Thanks for this nice tidy menu. I’m wondering how I can right align the menu items? By default it’s left aligned…
Hi Damian.
To right align the menu items find the following CSS in the custom CSS of this freebie and change the
justify-content
value toright
:.et_pb_menu.dvcs_free_header_3 .et_pb_menu__menu {
flex: 1 0 auto;
justify-content: right;
}
Hope this helps.
You’re a star!! Thank you!!