Custom Divi Header 03 – Free Download
Oh yeah, Another Divi Freebie!
The 3rd Custom Divi Header in Our Series
Our first free custom Divi header and our second free custom Divi header were both very popular, and we are excited that so many of you are finding this blog helpful. I want to make each one of these headers valuable to you, so I have included a lot of little extras features that go along with the main header. This customized Divi header has a modern look with a shaped background (all files included in the download).
I have a lot more of these FREE custom Divi headers coming that are all different and exciting, so keep an eye out right here for more!
Key Features
NOTE: Uses the Default Divi Header!
- Unique Open Menu
- Two Buttons Side By Side in Column
- Play Icon with Hover Effects
- Designated Column Stacking Order on Mobile
- Menu CTA Button
- Custom Slide-Out Mobile Menu
I spend a lot of time developing these FREE Divi resources. However, all I ask in return is that you subscribe to the blog. You won’t get spammed daily like some sites do (eh hem), but I will share helpful new tutorials and products once in a while when they come out.
NOTE: If you already subscribed for these before, no worries. You won’t have to confirm this time, just enter your info and the download link will appear.
How much do you love this?
How much do you love this?
How To Use
Download and Unzip The Included Files
- Customizer settings
- Theme Options Settings
- Custom CSS
- Divi Builder Layout
Once you download the files, unzip the folder labeled “.zip”. Inside you will see the included files each one named according to where it should be used.
Import the Customizer Settings
In your website Dashboard, go the Theme Customizer. Locate the up/down arrows in the top left corner and select this option.
This opens the Export/Import Portability popup.
Select “Choose File” and browse for the file labeled “Customizer Settings.”
Select “Import Divi Customizer Settings.”
Import Theme Options Settings
NOTE: Be careful that you don’t override any important existing Theme Options settings on existing sites. If you want, you can skip this step and simply import the Custom CSS instead.
In your Dashboard, go to Divi>Theme Options>General. Here you will see the up/down arrows in the top right corner in the purple.
This opens the Export/Import Portability popup.
Select “Choose File” and browse for the file labeled “Theme Options Settings.”
Select “Import Divi Theme Options.”
Copy and Paste Custom CSS
NOTE: This is only needed if you are not importing the Theme
Open the “.css” file in a code editor of your choice. We recommend using the Editey code editor which works great with Divi and Google Drive as explained in this blog post. Then, copy the CSS to your clipboard.
In your website Dashboard, go to Divi>Theme Options>Custom CSS. Paste the code here from your clipboard, and hit Save.
Import the Divi Layout
To import the Divi Layout, go the page in the Visual Builder and select the up/down arrows.
Select “No File Selected” and browse for the file labeled “Divi Layout.”
Select “Import Divi Builder Layout.”
NOTE: This needs to be imported to the page, not the library.
That’s it! Enjoy your new custom Divi header!
Beauty!
Love this thank you, it makes the menu a lot better. I want to make the burger bar menu kick in earlier as I have lots of menu items. Not sure which bit of the code to change. I tried this but doesn’t work properly. Thank you once again.
@media (max-width: 1200px) {
nav#top-menu-nav {
display: none !important;
}
}
Hi Richard, you would want to try something like this:
/* initiate mobile menu sooner than 980px */
@media only screen and (min-width : 981px) and (max-width : 1200px) {
#et_mobile_nav_menu {
display:block;
margin-bottom:10px;
margin-top:5px }
#top-menu-nav {
display:none;
}
}