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
Result
Video Tutorial
Table of Contents
Difficulty
Easy
Time
10 Minutes
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
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
Spacing
Padding Top: 10
Padding Bottom: 0
ADVANCED TAB
Scroll Effects
Sticky Position: Stick to Top
SAVE
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
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
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.
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.
Great Tutorial! I originally added a primary menu through the Customizer and lot of CS and thus when I try to add a secondary menu through your method it replaces my primary menu. Any thoughts?