The header is one of the most important elements of any website and is central to the user experience. The navigation menu gives your users an idea of what they can expect to find on your website and helps them locate the information they need. Additionally, a secondary menu bar can be a great space to highlight a call-to-action or to promote an offer. Not to mention, the header is one of the most prominent parts of your website because it typically appears on every single page. It is a great opportunity to showcase your branding and create a header that is cohesive with the design of the rest of your website.
Divi’s Theme Builder options allow you to create a custom global header and customize the look of your header and menu modules across your entire website. In this tutorial, we will show you how to build a global header using Divi’s fullwidth menu module.
Let’s get started!
Sneak Peek
Here is a preview of the global header we will design.
What You Need to Get Started
Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.
Now, you are ready to start!
How to Build a Global Header with Divi’s Fullwidth Menu Module
Open the Theme Builder
Since we are building a global header in this example, let’s navigate to the theme builder, which you can find under the Divi menu in WordPress. Select Add Global Header, then select Build Global Header.
Create the Secondary Menu Bar
When you first open the global header layout, it will come preloaded with a regular section. We will modify this to be our secondary menu bar, which will sit above our fullwidth menu and include some call-to-action text and a button.
First, open the section settings and add the background color.
Next, remove the padding from the section.
Now insert the row. For this design, we will use the row layout shown below.
In the row settings under Sizing, equalize the column heights.
Next, set the top and bottom padding.
We want the items in our secondary header to be vertically aligned, so let’s add some custom CSS to the row’s main element.
Now our row is set up and we can add the modules for our content. Insert a text module on the left side.
Modify the text content. This is a great place to include a CTA (call-to-action) or to promote an offer.
Navigate to the design tab of the text module and set the text font, weight, and color.
Next, add the button module to the right.
Add the button text,
Under the design tab, set the button alignment to center.
Now we can customize the look of the button.
Add the Fullwidth Menu Module
Now that the secondary menu is designed, we can move on to the primary menu. We will be building the menu using the fullwidth menu module. Add a new fullwidth section to the global header.
Select and insert the Fullwidth Menu module.
Next, we will customize the fullwidth menu settings.
Next, edit the dropdown menu options.
Change the hamburger menu icon color to black.
Before we add the logo to our menu, let’s modify the sizing options. We will use Divi’s built-in responsive options to set a different Max Height for desktop and mobile.
Now add your logo to the fullwidth menu.
Finally, we want the primary menu to stick to the top of the screen as the user scrolls through the website, so we’ll use Divi’s built-in sticky settings for this.
With that, the design of our global header is complete!
Create a New Page with a Premade Layout
To see the header and fullwidth menu in action, let’s create a new page with a premade layout from the Divi library. For this design, we will use the Flooring Home Page from the flooring layout pack.
Add a new page to your website and give it a title, then select the option to Use Divi Builder.
We are using a premade layout from the Divi library for this example, so select Browse Layouts.
Search for and select the Flooring Home Page layout.
Select Use This Layout to add the layout to your page.
Now the design is complete!
Let’s take a look at the final design for our global header.
Final Thoughts
As we have discussed, the header and navigation menu is central to the user experience of your website. Now you have seen how easy it is to design a great-looking global header with Divi’s fullwidth menu module. Thankfully, Divi’s theme builder gives you control over every aspect of your website’s menu and header, and you can create totally custom and unique designs with just a few clicks. If you are interested in more header tutorials, check out this collection of 30+ Helpful Divi Header Tutorials!
Have you used Divi’s global header options to customize your header and navigation menu? We would love to hear your thoughts in the comments!
This content was originally published here.