Create Better Divi Headers

Smooth Update: Added 4 New Divi Header Templates (Free Download)

by | Aug 29, 2023 | 8 comments

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 :)

View Live Demos & Get Divi MadMenu

    Download FREE Divi Sections

      8 Comments

      1. Dean Penn

        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?

        Reply
        • Ivan Chiurcci

          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 !important flag. 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.

          Reply
          • Dean Penn

            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

            Reply
            • Ivan Chiurcci

              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 Color

              You 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.

              Reply
              • Dean Penn

                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

              • Ivan Chiurcci

                My pleasure, Dean :) Please rate Smooth here on Divi Marketplace, it would be very helpful. Thank you!

      2. Hurri

        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!

        Reply
        • Ivan Chiurcci

          Thank you, Hurri! Appreciate you using Divi MadMenu and hope this freebie will be helpful :)

          Reply

      Submit a Comment

      Your email address will not be published. Required fields are marked *

      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!