Runners-up can look good too…

I’ve never seen a runner-up in Miss World be ugly and your Divi Secondary Menu doesn’t need to be either. Just another of those “Hey, Divi being used here!” giveaways when building sites using our favorite page builder.

It is not all bad news though, you can use that precious real estate and put some lipstick on that pig by relaying information to visitors, adding a button to your store, or promoting a sale, the world is your oyster here.

So how do we fix this? You guessed it, again, we turn to the ever-versatile Divi Theme Builder.

Today you’ll learn one way to get the juices flowing.

Time to get busy…

More in this series.

Continuing our Divi Tutorial Series on making your Divi sites not look like Divi sites, we are going to upcycle those distinct Divi Secondary Menu that comes in that classy blue by default. Divi natively gives you some basic options in the Theme Customizer to change things like the colors, and add a phone number or an email, but that is about it.

Adding anything else up there is a bit more troublesome if you don’t know how to code, or are not yet familiar with the Divi Theme Builder and all you can do to build better Divi sites using it. In this tutorial, we are going to show you how to add a Divi Secondary Menu that will stick to the top of your page as you scroll down. It will share an offer for free shipping as well as house your social icons.

Fancy, I know.

PREVIEW:

Before
Default Divi Secondary Menu
Result
Divi Secondary Menu - Finished Layout

Video Tutorial

Adding a Secondary Menu to the Global Header

We’ve been doing a lot of work in this series to build Divi sites that don’t look like Divi sites and previously we built out the header we will be working with. If you want to get caught up, definitely check out our post on How to Build a Custom Global Header in Divi using the Theme Builder, this will have you working on the same header we are.

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

Divi > Divi Theme Builder > Click the Pencil

Edit Divi Global Header

You’ll be greeted by the Divi Visual Builder and your Global Header layout. Now we need to add the Row that will house our Divi Secondary Menu bar.

Add a 3 Column Row (33/33/33) and drag it above the

3-Column Row Settings

CONTENT TAB

Background

Background Gradient: Add 2 more stop at 33% and 66%
Gradient Colors: 1f005c / 870160 / ca485c / f39060
Gradient Direction: 90 degrees

DESIGN TAB

Sizing

Use Custom Gutter: YES
Gutter Width: 1
Equalize Column Heights: YES
Width: 100%
Max Width: 2560px

Sizing

Padding Top: 10
Padding Bottom: 0

ADVANCED TAB

Scroll Effects

Sticky Position: Stick to Top

SAVE

Divi Secondary Menu - Row Settings

You should now have something that looks all fancy like this and you are ready to start adding your modules.

We will start with a text module to offer some free shipping.

Add an Text Module in Column 2

Text Module Settings

CONTENT TAB

Text

Body: Free Shipping on all orders over $100

DESIGN TAB

Text

Text Font: Poppins
Text Font Weight: Ultra Heavy
Text Font Style: Uppercase
Text Text Color: White
Text Text Size: 16px

SAVE

Divi Secondary Menu - Row Settings

Things are heating up and we are almost done with this Divi Secondary Menu. The last step is to add some Social Icons to our Divi Secondary Menu.

Add a Social Media Follow Module in Column 3 below the Text Modules.

Social Media Follow Module Settings

CONTENT TAB

Delete Twitter (We will get back to this)

FACEBOOK SETTINGS
Link

Account Link URL: Your Social Profile URL

Background

Background Color: Transparent or delete

Save

Duplicate Facebook Twice then change the setting below in each copy.

INSTAGRAM SETTINGS (Copy 1)
Network

Social Network: Instagram

Link

Account Link URL: Your Social Profile URL

SAVE

TWITTER SETTINGS (Copy 2)
Network

Social Network: Twitter

Link

Account Link URL: Your Social Profile URL

DESIGN TAB

Alignment

Module Alignment: Right

SAVE

Divi Secondary Menu - Finished Layout

Now, if you followed along diligently, you should be left with an eye-catching Divi Secondary Menu that will stick to the top of your page as you scroll down. 

Go you!

Another way to Build Better Divi Headers

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

Stock Divi is a fantastic tool to build amazing sites, but as we are trying to help you guys out to build Divi sites that don’t look like Divi sites, we’d be remiss to not share some ways to further extend Divi beyond its capabilities.

We want you to meet Divi Mega Menu.

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.

Divi Mega Menu Demo

By no means have to buy our plugins, we just appreciate you taking a look and we’ll keep producing awesome Divi content.

Thank you for being you!

You can still be first when you’re second, kids!

Conclusion

All done with this Divi Tutorial on How to Add a Secondary Menu to your Global Header in Divi using the Theme Builder. It might seem rather insignificant, but this space is prime real estate to bump up those order totals, or just relay something interesting to your visitors. You could even add some dynamic content in this space to breathe some life into your site. Definitely keep following along with this series to un-Divify your Divi sites to learn more awesome ways to use the Divi Theme.

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

written by

Robey Joyce

Business Development Manager

You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.