How do you build a header in Divi?

29 Jan 2022 | web design

jochem oomen | hoe bouw je een header in divi | Foto: Sander de Wilde

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 more than 240 such templates, but there is no header among them. 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.

Bodies and footers are easy to create in Divi, but a header in this theme and in this builder involves a little more. That’s because this includes a menu, which looks different on desktop, tablet and mobile. To make it easy, see a roadmap below.

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!

And what do you build your header with?

This article contains an affiliate link. Look here for more information.

About Jochem

I am Jochem Oomen, web designer and photographer. My goal is to help sustainable entrepreneurs, organizations and schools gain more customers, participants or students. I do this through sustainable web design and minimalist photography. Read more about me here.

Did you find this article interesting? Share it via the buttons on social media!

Staying informed? Subscribe to receive my latest blogs in your mailbox every time!

Read more here

On to a more sustainable internet

Recently, as a web designer, I signed the Sustainable Web Manifesto. With that, I declared my commitment to a more sustainable Internet. Why is that necessary? And how do I do that as a web designer? You'll read about it in this article.Why is the Internet unsustainable?"If the Internet were...

Second-hand or not?

More and more people are choosing used photo equipment or laptops. Not only because of the budget, but also because of the sustainability aspect. But now is it wise to go for second-hand equipment? This article will help you with the dilemma of "second-hand or not." Spoiler alert: it often...

Cycling in Brussels as an entrepreneur

Is cycling in the Belgian and European capitals life-threatening? Those days are thankfully a few years behind us. Getting around this city by bicycle is not only sustainable and a quick way to get around, it's also a good workout. Unsure about biking in Brussels? Find out the pros and cons...

Pin It on Pinterest

Share This