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
Demo
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 :)
Hi. Bit late to the party, but I love these headers. Having an issue with the mobile menu up / down arrow codes still, despite the fix listed in this article. Using codes \42 and \43, I’m still seeing the letter B / C in the menu rather than the arrows – any other fix for this please?
Also, I can’t seem to change the background colour of the sub-767px menu, no matter what CSS I edit. Is this possible please?
Hi Dean. If you are applying the icons fix as explained in the tutorial above but don’t see the changes on frontend then this is most probably a caching issue, make sure you clear all the cache and then check again using a different browser/private window.
Regarding the sub-767px menu background color: if your CSS declaration is not taking affect then most probably the menu background color is set using the
!importantflag. Use the browser dev tools to inspect the menu and see which selector is setting it’s background color, then use the same selector and increase it’s specificity by eg. using parent element selectors (classes) so that your CSS overrides the existing background color CSS.Hope this helps.
Hi Ivan. Thanks for the fast reply. I managed to fix the icons issue by disabling the Dynamic Icons in Divi’s performance settings, but the sub-767 background colour (teal / #395b64) is the same colour as used in the custom header and is already flagged as !important, but I can’t find it anywhere in the code blocks to change.
I did manage to change the background colour for desktop and tablet, but cannot find a way to change sub-767 colour so if you have any other thoughts I’d appreciate it.
Many thanks,
Dean
The custom CSS provides styling that is not available in Divi Builder elements, however, the Menu module allows you to set the mobile dropdown menu background color in the
Menu Settings -> Design -> Dropdown Menu -> Dropdown Menu Background ColorYou should be able to change the mobile dropdown menu background color there (check both Tablet and Phone background colors). Please try that and let me know if it works.
Hi – all sorted thank you. The colour hex hadn’t been applied in the ‘Phone’ tab of the menu settings you pointed me to, but changed it now and all working 👍
Thanks again for your patience and excellent headers 😉
Dean
My pleasure, Dean :) Please rate Smooth here on Divi Marketplace, it would be very helpful. Thank you!
Hello Ivan,
Thank you so much for another awesome freebie!
I really appreciate the effort you put into your products for us and I’m a huge fan of your Mad Menu Plugin too.
Keep up the great work!
Thank you, Hurri! Appreciate you using Divi MadMenu and hope this freebie will be helpful :)