The Divi header is simply the top area of your website that includes your logo and navigation along with any additional elements you may add such as a search box, social media icons, contact details, or shopping cart.
There are 2 options for adding a header to your Divi website;
- Use the default Divi header which is included out-of-the-box and is very easy to use, but has limited options.
- Using the Theme Builder to build your own custom Divi header which allows unlimited design freedom.
The default header is used automatically on a new Divi website. If you choose to use the Divi Theme Builder to build and assign a custom Divi header then it will then automatically replace the default header.
If you choose to use the Divi Theme Builder for your custom header you can either;
- Build it from scratch in the Divi Theme Builder using the available Divi sections, rows, and modules.
- Download, import, and assign a header from a Divi header layout pack or from one of the many free header & footer layouts from Elegant Themes
This article will give you a quick guide on how to add a Divi header using both methods.
1. How to use the default Divi header on your website
A Divi website will use the basic header by default and shows the default Divi logo and any pages you have created will also be added to the navigation menu. There is also a default secondary Divi menu that can hold more navigation links, contact details, and social media icon links.
There are several customizations you can make to the default header area but the two that are most obvious would be to add your own logo and set up your navigation structure.
Set up your menu structure in the WordPress dashboard
By default, the pages you add to your website will be included in the header navigation but in order to be able to re-order them and create drop-down menus and mega menus you will need to add your pages to the WordPress Menu dashboard and manage them there. Doing this is advised whatever header method you are using.
To set up your menu in WordPress you will want to follow these steps:
- Login to your WordPress dashboard and click on Appearance on the left-hand side and then Menus.
- Give your new menu a name, then click on the “Create Menu” button.
- Once your menu is created, you can add pages, posts, custom links, or categories to it from the Add menu items area on the left which then goes into the Menu Structure area.
- To organize your menu, you can drag and drop items to re-order them or create dropdown menus.
- Once you have added and arranged your menu items, select the location where you want the menu to appear on your site from the Manage Locations tab. In Divi, you can select from the Primary menu, Secondary menu, and Footer menu.
- Finally, click on the “Save Menu” button to save your changes.
Your WordPress menu will now be set up and used in your Divi header. You can add, remove, or rearrange your menu items via the Menu dashboard.
Add your own logo in the Dvi Theme options area
You can add your own logo image to Divi in the Divi Theme options area in your WordPress dashboard.
- In your WordPress dashboard menu click on Divi > Theme Options
- In the Theme Options > General > General tab right at the top, you will see the Logo field.
- Click on the Upload Image button to select and upload your logo image into your media library.
- Click on Set As Logo and your logo URL will be added to the option field
- Clicking the Reset button will remove your logo and replace it with the default Divi logo
Divi Theme Customizer options
Now you have your own logo and menu set up you can look at the other customization options and additional elements you may need to add to your default Divi header.
You will find these Divi header customization options in the Theme Customizer which can be found by clicking on your website name on the WordPress menu bar and then navigating to Header & Navigation. Here you can choose the header format, add or remove header elements, and control the basic headers design such as fonts and colors.
Choose a header format
There are five built-in Divi navigation menu styles to choose from. You can choose between: Default, Centered, Centered Inline Logo, Slide In, or Fullscreen.
The default option aligns your logo on the left and the menu on the right, the centered option places the logo above the menu, and the inline option places the logo in the middle of your menu. The slide-in menu slides in from the right when the hamburger menu icon is clicked and the full-screen option uses a full-page overlay for the menu.
You can also use the checkboxes to Enable Vertical Navigation and/or Hide Navigation Until Scroll. The vertical navigation option will stack your navigation and logo vertically on the left of the page. The hide navigation option removes the header until the user scrolls the page.
Add or remove header elements
The header elements tab allows you to show or hide social media icons, the search box, a phone number, and an email address. The phone number, social media icons, and email will be displayed in the secondary menu which is a slimline bar that sits above the primary menu. You can also assign another menu with links here via the WordPress dashboard menu tab.
Customize colors & fonts
The Theme Customizer also allows you to customize the primary and secondary menu bars’ fonts and colors. You can set the font, size, and color along with the menu background colors.
The default menu is clean and simple but as you can see above there are limited styling options and using this header may make your website look too divi!
So if you need much more control over how your header looks then you will want to start using the Divi Theme Builder.
2. How to add a custom Divi header using the Theme Builder
The Divi Theme Builder allows us to build a global header template that is then applied to all pages across our entire website.
Once activated it replaces the Default Divi headed completely across your website.
We can build the header within the Divi Theme Builder area using any of the Divi modules just like we would build a page. You are free to add as many sections rows, and modules as are required in your header.
The Divi Menu module is obviously a key part of the header template and just like the default Divi header above, the menu module uses the menu structure that you set up in the WordPress dashboard.
The steps required to add a custom global Divi header in the Theme Builder are as follows;
- Navigate to the Divi Theme Builder in your WordPress dashboard at Divi > Theme Builder.
- In the Default Website Template click on the Add Global Header button.
- You can then choose to use either a pre-built header layout you have imported into the Divi library or create your own custom layout from scratch using Divi modules.
- Once you have added and customized your header in the Theme Builder, click the “Save & Exit” button to save your changes and publish the header on your website.
There is a comprehensive guide over at Elegant Themes on How to Create a Custom Global Header with Divi’s Theme Builder
If you are still looking for ways to learn about customizing your Divi header then this round-up post from Elegant Themes is a good place to learn 30+ Helpful Divi Header Tutorials for Divi.
Final Thoughts
This website still uses the default Divi header despite all the options available via the Theme Builder. I like the simplicity of the menu, I don’t mind that it looks like a Divi menu, and it provides all the functions that I require it to. We all have different needs and styles and there is no right or wrong option to add a Divi header so use whatever works for you and your users.
If you have a great example of a Divi header live on a website drop a line in the comments.
