Divi is a great theme and builder for WordPress. You can actually build anything with it, either from scratch or with a template. Now there are hundreds of those templates, but they don’t include a header. Logical, because a header really differs from one website to another. But how do you build a header in Divi? This blog post will answer your question.
Before we fly in, a brief word in advance. You can actually divide every web page into three major parts: a header, a body and a footer. The header is the top piece: it often contains a logo and a menu, sometimes with some additional information. The body is the middle piece: the content of the page in question. At the very bottom you will find the footer containing copyright, sometimes contact information and some additional information. On most websites, headers and footers are the same on every page, so a body varies from page to page.
Want to read more about web design in general? Here you will read how to build a great website.
Want to know how to create a footer in Divi? Then check out this step-by-step guide to creating a great footer in Divi!
By the way, Divi theme and builder is one of my favorite tools. Curious about more? Discover my favorite tools for both web design and photography here.
1. Create global header
On the left side of your WordPress-dashboard you can see the letter -D, which stands for Divi. Slide your cursor over this and click on “theme builder”. In this theme builder you will see “Default website template”, here you can work in it. Once you click on “add global header,” you will see several options. Select “building from scratch.”
2. Create fullwidth header
You will end up on a blank page, where you can click on a plus sign. Once you click on that, the “insert section” window appears. You go for “new section” and you choose “fullwidth.” This is a handy one because it is basically already full-screen, you don’t need additional code for it. At least not for the desktop version.
3. Set full-width header
If you slide over this bar with your cursor, you can change two settings. That of the section or that of the module. We go for the module. At content select the menu you created in the theme customizer, at logo you can upload your logo. Once you’ve done that, you’ll probably see your logo very large. You can reduce that in design under the heading “sizing” under “logo width.” Also, under “menu text” you can change the font, color and size of the menu. If you want to change the background color of your header, you can do so by selecting “background” under content. There are also ways to make them (partially) transparent.
Your choice of font is also important in the header. Are you looking for great typography for your site? Then read how to choose an online font here!
Optional: create and set top header
What you see here above this website is a fullwidth header. On some websites, you can find a bar above that, sometimes with a tagline or additional information: that’s a top header. You can create these very easily in Divi. Under your fullwidth header press the plus sign, under “new section” select the item “fullwidth” and under “insert module” go for “fullwidth header”. Now you will see a huge header appear underneath. When I create this for clients, I actually take out all the information and features. Only the plain text stays in it, which I modify by a tagline or contact information. Furthermore, I greatly reduce the size of the header by working with margin and padding. Ultimately, you want this top header to be above your other, or main header. You do this by simply dragging it away and releasing it above the main header. So, you have a top header and main header on top of each other.
4. Making fullwidth header sticky
Want to attach your header to the top of each page, so keep it visible as you scroll down? That too is possible. Select the cog of the black module (“fullwidth menu”), go to the “advanced” tab and go to “scroll effects.” Here, under the “sticky position” section, you can select the “stick to top” function. Don’t forget to save.
5. Set layout dropdown menu
Now take a look at your creation via tablet or “mobile view” and you’ll see that your dropdown menu and hamburger icon look different than you thought. Fortunately, you can set that up relatively easily. Go back to your “fullwidth menu settings” and open the “dropdown menu” section. Here you can easily customize your dropdown menu. Furthermore, you can see that your hamburger menu icon is not yet customized to your needs. You do that at design and “icons.”
Optional: align mobile menu in Divi
Until now, not a single line of code was needed. But … What if you don’t want margin with your mobile menu? If your intention is to design a sleek website, it might be nice to have your menu aligned across the full width of your cell phone’s screen. However, you do have CSS code for that. Since I am not the author of that code, I am therefore happy to refer you to an English-language blog. Here you can read how to align mobile menu and customize additional icons using CSS code if necessary.
Want to know more about making Divi websites mobile proof? Then read how to make a Divi site responsive here!
Good to know: sustainable header
Do you value sustainability? Then it is advisable to keep your header simple: just the logo on the left and the menu on the right, without too many frills and extra code. Does your header contain extra stuff? Then Divi writes extra code and your website needs more power. Also, don’t forget to optimize your logo for the header. Such things contribute not only to the speed, but also to the durability of your site.
Want to learn more about optimizing logos and other images? Then discover here how to resize photos without losing quality!
Conclusion
Building a header in Divi is not always easy. Especially if you want to customize it for the mobile version or align it. Fortunately, Divi does offer a lot of options. Just keep in mind that extra lines of code can make your website less power efficient.
Article updated January 24, 2025.
This article contains an affiliate link. Look here for more information.