Being a premium WordPress theme, Divi offers plenty of customization options. It allows you to customize every part of your theme, including the header. In case you are new to Divi, this article will show you how to customize the header in Divi theme.
One thing to note before we get started. Divi is bundled with a built-in page builder (called Divi Builder) in which the page builder comes with a Theme Builder feature. You can use it (the Theme Builder feature) to create a custom template for each theme part, including the header. We have a separate article that covers this. You can read it here. This article will cover the header customization via theme customizer, which also offers plenty of styling options.
Divi allows you to add the following elements to the header:
- Site logo
- Main menu
- Secondary menu
- Search icon
- Social media icons
- Phone number
- Email address
The Divi header itself is divided into two parts: the primary header (the larger one) and secondary header (the smaller one which lies on the top). You can add the site logo, main menu, and search icon to the main header. While for the secondary menu, social media icons, phone, and email address, you can add them to the secondary header.
Let’s cover one by one.
Adding the site logo
By default, your header contains the Divi logo. To replace it with your own logo, you can go to Divi -> Theme Options on your WordPress dashboard. Under the General tab, click the UPLOAD button on the Logo option and select the logo you want to use. Divi provides no specific info about the size of the logo, but you can use the logo in either a vertical or horizontal orientation.
Don’t forget to click the Save Changes button to apply the change you have just made.
To set the height of the logo, you can open the theme customizer (Appearance -> Customize). Go to Header & Navigation and open the Primary Menu Bar block. You can set the maximum height of the logo on the LOGO MAX HEIGHT option. You can tick the HIDE LOGO IMAGE option in case you want to hide your logo on the header.
Click the Publish button on the top side to apply the new changes.
Adding the site menu
You can add a menu on each header (main header and secondary header). To do so, you can go to Appearance -> Menus on your WordPress dashboard. Before being able to add a menu to each header, make sure you already have the menus you want to add. If you don’t have ones yet, you can create two new menus (one for the main header and another for the secondary header). If you are new to WordPress, you can read this article to learn how to create a menu.
Once your menus are ready, open the Manage Locations tab. Select the menu for the main header on the Primary Menu option and the menu for the secondary header on the Secondary Menu option. Click the Save Changes button
To style up the menu, you can again go to the theme customizer and enter to Header & Navigation. To style up the main menu, open the Primary Menu Bar block. You can set the menu height on the MENU HEIGHT option, menu text size on the TEXT option, font family on the FONT option, text color on the TEXT COLOR option, header background on the BACKGROUND option color, and so on.
To style up the secondary header, you can open the Secondary Menu Bar block. You can set the menu text size on the TEXT SIZE option, font family on the FONT option, header background on the BACKGROUND COLOR option, menu text color on the TEXT COLOR option, and so on.
Don’t forget to click the Publish button once you are done making the settings.
Adding search icon, social media icons, phone number, and email address
As we mentioned earlier, you can add the social media icons, phone number, and email address to the secondary header. While for the search icon, you can add it to the main header. To add these elements, you can again go to Header & Navigation on the theme customizer. You can open the Header Elements block to add the elements.
Again, don’t forget to click the Publish button to apply the changes. To set the social media platforms to be displayed — as well as the accounts, you can go to Divi -> Theme Options. You will find the options to show/hide the social media platforms and add the profile URLs under the General tab.
Don’t forget to click the Save Changes button to apply the changes.
Customizing the fixed header
By default, Divi applies a sticky (fixed) effect to your header. If you want to disable it, you can go to Divi -> Theme Options. You can find the option to enable this effect under the General tab.
If you prefer to retain the sticky effect, you can customize it from the theme customizer. On the theme customizer, enter to the Header & Navigation and open the Fixed Navigation Settings block. You can set the height on the FIXED MENU HEIGHT option, the menu text size on the TEXT SIZE option, the color of the primary header on the PRIMARY MENU BACKGROUND COLOR option, the color of the secondary header on the SECONDARY MENU BACKGROUND COLOR, and so on.
There is also an option to hide the logo on the sticky menu in case you want to enable it. Click the Publish button to apply the changes.
The bottom line
If you want to add more elements to the header and have the ability to set a custom header behavior (such as hiding the header on scroll down and show it up again on scroll up), we suggest you create a custom header using the Theme Feature of Divi Builder. Creating a custom header also offers the opportunity to create a unique header with your own design. You can read our previous article to learn how to create a custom header with Divi Builder.