Smooth v1.3: Added 3 New Divi Header Templates (Free Download)
The Smooth Divi Header Templates Pack has just hit the double digits – a perfect 10 headers to choose from!
It’s latest version (v1.3) comes with three brand new stunning Divi header templates. Don’t miss out on a chance to try them out now and give your Divi website a fresh look without spending a dime.
And that’s because the Smooth Divi Header Templates Pack is still available for download absolutely for FREE!
Table of Contents
Demo
Main Features
The main feature of the new header templates is still the smooth effect implemented for the desktop menu submenus.
The rest of the useful features are the collapsed mobile menu submenus, top bars for additional header elements (like social icons and contact info), catchy call to action buttons, and a neat, modern design that looks good on any device.
How to download and start using
The Smooth Divi Header Templates Pack is available for download on Divi Marketplace.
All headers are Divi Theme Builder templates, so, you should import them as new templates directly into the Theme Builder.
Please follow this detailed guide about how to import Divi Theme Builder templates.
How to customize
These header templates use Divi Builder elements only (sections, rows and native modules), no additional plugins or Divi extensions required.
Once you’ve brought the header templates into the Divi Theme Builder, you can customize them just like any other Divi template by adjusting the settings of the Divi Builder elements.
The header templates also incorporate certain custom CSS and JS to implement some custom features, such as the smooth submenus effect.
If you wish to modify the custom code you can find it in the Code modules within the header layout. Simply switch to Wireframe mode, locate the Code modules labeled accordingly, and make your adjustments there.
Possible issue with icons and how to fix it
You may encounter an issue with the custom font icons displaying incorrectly after importing the header templates.
This issue is happening due to an issue in Divi portability which is altering the icon codes in the custom CSS that iclude a “\” character.
To fix the icon issue locate the Code modules of the header template that contain 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”.
Start using the new Smooth Divi header templates now!
That’s it! Hope you’ll find these new header templates useful for your Divi projects. Give them a try and let me know your thoughts and suggestions in the comments section below.
P.S. You might want to check out the FREE Shoppy Divi eCommerce Header Template Pack as well.
Hi, I’ve been trying to set the header menu to stick at the top, can you help me with that?
Hi Carlos.
You can use the header section’s Position settings to make the header fixed. Or if you want the header to stick to top on scroll you can use the header section’s Scroll Effects settings and set the Sticky Position setting to Stick To Top. Hope this helps.
Hey Ivan, amazing module! Just one question though, is it possible to increase the width of the submenus??? I’ve had a look through the code modules and nothing is jumping out at me.
Hi Roger.
You can try this CSS:
.nav li ul {width: 340px;
}
.et-menu li li a {
width: 300px;
}
Note the difference of 40px between the width values of the submenu and the submenu items. That’s due to the default left and right padding applied to the items (20px each side). If you want this CSS to apply only to the header template that you are using you can add a custom CSS class to the Menu module and use the same class in the selector.
Hope this helps.
HI Ivan,
Thanks for that – it works great! I also managed to get it to only do one of the menu items using li:nth-child(3), so it only makes the submenu with the more lengthy items wider.
I wouldn’t recommend you to use the
li:nth-child(3)selector in this case because if you later add more items and/or change the items’ order in the menu then theli:nth-child(3)selector will target a different item, not the one you need. Better add a custom CSS class to the menu item inAppearance -> Menus, and then use that class to target the item’s submenu.Thanks for the advice Ivan, I’ll take a look at using a custom class. I’ve got another bug as well, but I’ll post as a separate comment in case anyone else has a similar issue.
No problem, Roger :) Sure, feel free to report issues and ask any questions you have about the Smooth header templates here, I’ll reply asap.
Hi – awesome layout! However, I cannot, for the life of me, figure out where to change the dropdown background menus (desktop and mobile) it doesn’t appear to be on the column or module settings. Thanks!
Hi Ingrid.
Are you trying to change the dropdown menus background color? You can change the background color of the mobile dropdown menu in the Menu module’s design settings in:
Menu Settings -> Design -> Dropdown Menu -> Dropdown Menu Background ColorHowever, the desktop menu submenus background color needs to be changed in the custom CSS, please find the CSS with the
.dvcs_submenu_bgselector and change the background color there. The selector is different depending on the header template you are using, it looks smth like this:.et-l--body .dvcs_free_header_4 .dvcs_submenu_bg {background: #395B64; /* set the desktop submenu background color here */
border-radius: 4px;
box-shadow: 0px 2px 18px 0px rgb(0 0 0 / 10%);
}
Hope this helps.
Hi Ivan,
Thanks for your response! I have been looking through the CSS files and cannot find that selector – do you know what file it’s in?
Hi Ingrid.
You can find the custom CSS in a Code module included in the header template layout. After you import the header template into the Theme Builder and open to edit it just switch to the Wireframe mode and you will find the Code module with CSS there, it is labeled accordingly (Code – Smooth Submenus Effect CSS & JS). You can check it out in the How To Customize section of the tutorial above. Open the Code module settings modal and search the CSS for the
.dvcs_submenu_bgselector, that’s where you will be able to change the submenus background color as I’ve mentioned in my previous reply. Hope this helps.AH YES! I completely forgot about that module and was making it harder by looking through the theme CSS files. Of course it’s there. Thank you!
Hi, me again. :)
Where is the transition/animation/ease in? I’d like to take that off completely so it doesn’t fade in on load. Thanks!
Hi Ingrid. Animation of which header element do you want to disable?
Hi Ivan,
It seems it all has animation. The top bar text (phone and email), the button, and the main menu all bounce in. Basically, take off all of that so that it’s just static (I love the smooth submenu).
Thank you – I really appreciate your responsiveness. I’ve used your creations on a number of things and will continue doing so!
Hi Ingrid.
Which Smooth header template are you using? The templates that are available for download have the same configuration as the live demos, but I don’t see any “bounce-in” animations on the demos and I don’t remember using such animation. Maybe it’s the transition that you would like to remove? Please go to transition settings of each element of the header(in Advanced->Transitions) and set Transition Duration to 0(zero), clear cache and see if that helps.
And I’m really happy to hear that you’re enjoying the headers! 😊 Thank you.
Hi Ivan,
I’m using #8. Setting the transitions to 0 did most of the trick! The main menu module still has it on, for some reason, but I’ll figure that out. Thank you!
Ingrid
Beautiful designs that work well! I’m having trouble getting them to work with the Divi Mega Menu, though. I’m using the built-in version where you just add a CSS class to the menu item (“mega-menu”), as documented here: elegantthemes.com/documentation/divi/mega-menus/.
What happens is, when I’m using the beautiful Smooth Menu, it moves the mega menu way off to the left side of the screen, off-screen, in fact.
All non-mega-menu items display properly. Any ideas how I can fix that?
Hi Holly.
The smooth effect is designed to work with the classic submenus (non-mega-menu submenus) of Divi menus, the
mega-menuclass applies different CSS to the submenu which is not fully compatible with the smooth effect CSS out of the box, some adjustments need to be applied. You can try this CSS:.et_pb_menu.dvcs_smooth_submenus .et_pb_menu__menu > nav > ul > li.mega-menu {position: relative;
}
.et_pb_menu.dvcs_smooth_submenus .et-menu-nav li.mega-menu > ul {
width: max-content;
}
.et_pb_menu.dvcs_smooth_submenus .et-menu-nav li.mega-menu:hover > ul {
transition: all .2s ease-in-out !important;
}
.et_pb_menu.dvcs_smooth_submenus .et-menu-nav li.mega-menu > ul {
left: 50% !important;
}
Hope this helps (though I didn’t test it thoroughly).
Ivan, THANK YOU! How kind of you to write this code for me, it worked! It looks really great, I appreciate your time so much.
Happy to help, Holly :) I’d be grateful if you shared your experience using the Smooth header templates on the Smooth’s page on Divi Marketplace, that would be really helpful for those who also need Divi header templates. Thank you!
When I open the menu on mobile the hamburger icon is replaced with a large lowercase D. I am wondering where I can change this to another icon.
Hi Ryan.
Please check the “Possible issue with icons and how to fix it” section above, looks like it’s the solution you need. Hope this helps.
Not related to this post but a question related to fixed header. I am seeing a white space on the top of the fixed header while I have set the section, row and madmenu background as transparent. My objective is to have a transparent header with overlapping content.
Hi Thomas.
Thanks for your question. If you want the Divi MadMenu fixed header to overlap the page content you need to enable the fixed header in MadMenu Settings -> Advanced -> Position -> Enable Fixed Header, and then select the Top(Overlap Content) option for the Fixed Header Position field.
If this is not what you need or if you are still having the issue with the white space, please submit your support request here: https://divicio.us/support/ , and I’ll look into it asap. Thanks.
I can not download Smooth Divi Header Templates Pack. How to i download this item?
Hi Golam Rabbi.
The Smooth Divi Header Templates Pack is currently available for download on the Divi Marketplace only, just login to your ET account and download the product here by clicking the “Download This Item” button.