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.
I subscribed but didnt get files
Hi Haasan.
I’ve checked your subscription and see that you’ve already subscribed and confirmed your email address before, that’s why you didn’t get the Welcome email with the download link, it’s sent only once when you confirm your email address for the first time. To download the freebies package please find our latest email with the freebies update in your inbox and download it from that email, the download link is still valid. Or use a new email address to subscribe and receive the Welcome email with the download link (you can unsubscribe at any time later).
The freebies package includes this header template with the “smooth” submenus effect, however, if you want to download all header templates with the smooth submenus effect please check out the Smooth Divi Header Templates Pack, you can download it from our page on the ET Divi Marketplace.
Hope this is helpful.
I am not an Divi member now. But i want it for my client. Can i download it ? I already subscribe you.
I understand. The headers pack is free, and your client can download it directly from their Elegant Themes account. Please have your client download the pack and share it with you so you can continue working on their website. That’s completely fine.
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-contentvalue 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!!