Custom Divi Header 02 – Free Download
Woo-hoo, Another Divi Freebie!
The 2nd Custom Divi Header in Our Series
Our first free custom Divi header last week was a big hit. Actually, it was much more popular than I anticipated. 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 is something I made by simply experimenting with CSS, and I really liked it, so I decided to share it with you all.
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 Boxed Menu
- Three Vertical Dots for Closed Mobile Menu
- Three Horizontal Dots for Open Mobile Menu
- Customized Mobile Menu
- Line Under Active Menu Item
- 21:9 Forced Image Aspect Ratio
- Image Zoom on Hover
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.
NOTE: In this Custom Divi Header 02 you will need the FontAwesome code. Please go to the Theme Options>Integrations>Head and paste in this code.
PGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2ZvbnQtYXdlc29tZS80LjYuMy9jc3MvZm9udC1hd2Vzb21lLm1pbi5jc3MiIC8+
[/et_pb_dmb_code_snippet]
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!
Nelson Lee Miller
Sneak Peak!
See You Next Week!
