More in this series.

Continuing our Divi Tutorial Series on making your Divi sites not look like Divi sites, we will turn the looking glass on the Divi Menu. Another clear tell that a site was built using the Divi Theme is that notorious default Divi Menu. Now Elegant Themes do not completely leave you in a lurch here as they give you some basic options via the Theme Customizer, but if you want to do anything a little fancier, you’d need to either know CSS, install a plugin, or utilize the Divi Theme Builder.

We know the Divi Theme Builder is still a scary concept for some Divi die-hards out there, but today’s Divi tutorial will take you step-by-step through building out a Divi Menu based on a design we found on dribbble (← linked).

Let’s do this!

PREVIEW:

Before

Design INspiration

Result

Video Tutorial

Build a Divi Menu using the Theme Builder

Let’s start by demystifying the Divi Theme Builder and build out a new Global Header that will contain our Divi Menu and some other elements found on our inspiration site.

At first glance, we can see that it consists of 3 columns that contain the logo, the menu, and some text with a phone number. Wait, Divi has all that! To build our Divi Global Header we will need a Row with 3 columns, an Image Module, a Menu Module, and a Text Module.

Easy peasy lemon squeezy.

Alright, so to get going, let’s head to the following area in our Divi Install:

Divi > Divi Theme Builder

Add a New Global Header

Add Global Header > Build Global Header

Section Settings

Padding Top/Bottom: 0px

You’ll be greeted by the Divi Visual Builder and now we need to add a Row that will be the new home of the required Modules.

Add a 3 Column Row (25/50/25)

3-Column Row Settings

DESIGN TAB

Sizing

Equalize Column Heights: YES

SAVE

Time to add the image module that will be our site logo. We used the Divi Engine logo, but you can obviously use any logo your little heart desires.

Add an Image Module in Column 1

Image Module Settings

CONTENT TAB

Image

Image: Upload or select your fancy logo

DESIGN TAB

Sizing

Max Width: 200px (You might need to play with this depending on your logo image)

SAVE

Logo locked in, now it is time for the menu. Please make sure that you already created a menu over at Appearance > Menus which we can use here.

Add an Menu Module in Column 2

Menu Module Settings

CONTENT TAB

Content

Menu: Select your menu

DESIGN TAB

Layout

Style: Centered

Menu Text

Menu Font: Poppins
Menu Font Weight: Light
Menu Font Color: #333333
Menu Text Size: 21px

SAVE

The last hurdle in the building phase here is to add the text in the far right column. In our example, they are probably using conditional logic to display the hours for the day and this is something you can definitely do in Divi. Check out Part 3 on our Clone Any Online Store Series that covers Conditional Display Logic in-depth if you are curious to learn how this works in more detail.

For now, we will just use plain text.

Add an Text Module in Column 3

Text Module Settings

CONTENT TAB

Text

Body (Text View): 
Call Us
<h3>0800 123 4567</h3>

DESIGN TAB

Text

Text Text Size: 16px
Text Alignment: Right

Heading Text (H3)

Heading 3 Font: Poppins
Heading 3 Font Weight: Bold
Heading 3 Text Size: 26px

SAVE

Ok, looking good, we just need to add a little bit of CSS to finish the design.

Adding CSS to the Divi Global Header in the Theme Builder

Center Modules Vertically

Let’s start by centering those Modules vertically in their Columns.

3-Column Row > Column 1 > Advanced Tab > Main Element

Add this single line of CSS:

align-self: center;

Repeat this process for Columns 2 & 3.

Now you feel like a super l33t coder because you see those modules floating in mid-air. Great job!

 Add Underline Hover Effect

Time to fancy and underline those menu links when you hover over them with the mouse. For this, we will add some CSS to the Divi Theme Options, but first, we need to add a class to our Menu Module to let Divi know where to go apply the CSS.

Menu Module Settings > Advanced Tab > CSS ID & Classes

Add this class in CSS Class:

de-line-menu

Now, all that is left is to add our code to the Divi Theme Options and we will have that sexy underline animation when the menu links in the Divi Global Header is hovered.

Let’s head back to the WordPress Dashboard making sure to save our work.

Divi > Theme Options > Custom CSS 

Copy and Paste the code below.

Now, all that is left is to add our code to the Divi Theme Options and we will have that sexy underline animation when the menu links in the Divi Global Header is hovered.

Let’s head back to the WordPress Dashboard making sure to save our work.

Divi > Theme Options > Custom CSS 

Copy and Paste the code below.

Woohoo, run to the frontend and see what you’ve created! Shock and awe…well…AWE, mostly awe.

Taking things further with Divi Mega Menu & Divi Mobile

This part is not mandatory, so the class is dismissed! Still here? Good. Time to share some Divi Super Powers.

You can do a ton of amazing things with stock Divi, but sometimes you see features on other sites that are must-haves. Things that will set your site so far apart from a Divi site, it could have hitched a ride to Mars with uncle Elon. Two things that come up all the time are Mega Menus and Hamburger Menus on Desktop devices.

Luckily Divi Engine has got your back with two affordable plugins that can do just that and more!

Let’s take a quick look.

Divi Mega Menu

In short, a Mega Menu is basically a type of menu where you can add some flair to the boring Divi Menu by allowing you to use other modules other than just plain sleepy text. With Divi Mega Menu you can use the Divi Builder you know to build out complex or simple works of Divi Menu art. Picasso. We even added a couple of unique modules you can use to really set yourself apart.

Did you spot the Mega Menu on our inspiration site from dribbble?

This looks awesome and you won’t believe how easy it is to build this out in Divi using Divi Mega Menu and the Divi Builder. We love Mega Menus so much, we actually used a very similar design on our website when you click on Plugins.

This is just one example of what is possible when using Divi Mega Menu. We simply built a layout with some blurb modules for each menu link and then applied some hover effects and BAM! One super slick Mega Menu in Divi using skills you already have.

Divi Mega Menu adds tons of extra ways to express your site’s identity with menu overlays, 2 NEW Modules for things like vertical tabs in your Mega Menu, as well as popups that can be triggered from anywhere on the page.

Divi Mobile

Don’t let the name fool you, Divi Mobile does more than help you create amazing Mobile Menus for your Divi sites. You can use Divi Mobile to place a Hamburger Menu on your desktop devices as well as create some pretty unique effects.

Yep, all that was done using just our little Divi Mobile plugin. Now, this is not some one-trick pony, Divi Mobile will let you set custom breakpoints for showing the mobile menu, give you 6 preset styles for your actual mobile menu, and even let you change the hamburger icon and animations. That and so much more.

Elegant Themes checking out your Divi Menu…

Conclusion

There you have it folks, a quick functional Divi Tutorials that showed you How to Build a Custom Global Header in Divi using the Theme Builder. What is even better, we showed you how to dissect and analyze a design you like and transport it into your Divi abode. 

Go, YOU!

Don’t skimp either, go check out both Divi Mega Menu and Divi Mobile to see how you can start building better Divi Websites.

Definitely drop a comment below to let us know what you think, and for sure share any suggestions.