Create Better Divi Headers

Free Download: Divi Header Template With Smooth Submenus Effect

by | Aug 25, 2022 | 3 comments

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:

N

Smooth submenus effect for desktop menu

N

Collapsed nested menu items on mobile

N

CTA Button

N

Search icon

N

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.

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!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!