Customizing Diviโ€™s Secondary Menu Bar with a Call to Action

Last Updated on September 16, 2022 by 1 Comment

Customizing Diviโ€™s Secondary Menu Bar with a Call to Action
Blog / Divi Resources / Customizing Diviโ€™s Secondary Menu Bar with a Call to Action

Diviโ€™s secondary menu can be a lot more than a place where you list social networks and host a search bar. It is a fantastic place to engage your audience and call them to action in some way. Many of our free header/footer packs make great use of the secondary menu. In this tutorial, weโ€™re going to go through the process of adding a Call to Action to the secondary menu bar of your Divi website.

Preview the Call to Action Module

Desktop

desktop preview

Mobile

mobile results

Add a Header Menu with a Secondary Menu Bar

For this article, we are going to use the Creative CV layout pack and freebie header. Our first step is to go to the header post and download the .json file.

divi json

Next, head into your WordPress dashboard. Then navigate to Divi โ€“ Theme Builderย and click on theย up-and-down arrows icon to open the Divi portability options.

portability options

Inside the pop-up, click theย Import tab, find theย .json file for the header that you downloaded, and clickย Import Divi Theme Builder Templates.

import

With this done, you can click into theย Global Header to enter the Divi Builder. If prompted, selectย Creative CV from the dropdown menu.

Add the Call to Action to the Secondary Menu Bar

When you enter the Divi Builder for your header, be sure to identify which menu bar is the primary and which is secondary. We identify the primary as the menu bar with the main navigation bar. So weโ€™re going to add our Call to Action in the top-most bar.

finding secondary

Add a New Row

Because of the header layout weโ€™re using, we want the CTA to have as much space as we can without disrupting the design. We chose this layout packโ€™s header because it uses the large center column with smaller side columns. This will give it prominence on the site, no matter what device a user is on. You can see which one it is below, if youโ€™re using a different header than we are.

insert new row

Adjust Visibility for Existing Modules

If you use the same header layout as this tutorial, you will want to go into theย Row options for all rows and make sure that each column is individually visible on all devices. This is under Row Settings โ€“ Column Settings โ€“ Advanced โ€“ Visibility.

column visibility

Be sure to uncheck any devices that you want to see the columnโ€™s content on.

Add the Call to Action Module

Next, we will click on theย black + icon to add a new module to the new row. We are using the Call to Action module in Divi, and you can find it near the top of theย Insert Moduleย dropdown.

insert module

Edit the Call to Action Module

If you notice in the screenshot below, the defaultย Call to Action module size and styling is not quite suited for the header menu. Or most websites, straight out of the box. So weโ€™re going to style it appropriately so it doesnโ€™t seem out of place.

cta module

Change the Background Color

First thing, letโ€™s adjust the background to beย transparent so that no matter where the CTA sits, it matches the design around it. You find this option in the Background area under theย Content tab of the Call to Action module. The option to turn the background transparent is the circle in the palette with a red slash over the checkered squares.

transparent background

Adjust the CTA Content

The Call to Action module is versatile in that you can use this single module to have a header, body text, and a button at the same time. Additionally, the real utility comes in that you can use the CTA module to link out toย two different URLs depending on how you use it (one for the button and one for the body/title).

However, because so much information can be included, the module can get pretty large. So weโ€™re going to keep things pretty succinct for our CTA, editing the headline, body, and button text to fit more easily in the headerโ€™s secondary menu bar. These editing options are in theย Call to Action Settings under theย Content tab. You can adjust all of them under the Text heading.

content

Adjust the Call to Actionโ€™s Size and Spacing

Making sure that the Call to Action module fits well into the header is very important. So go into theย Designย tab of the module settings and find theย Spacing section. Set theย Top Margin for the CTA module toย -3vh and the Bottom Margin to -10vh. This should pull the menu bar into a more narrow position.

cta margin

Next, go into theย Responsiveness settings and set the margins forย mobile to beย -9vh on top andย -20vh on bottom.

mobile margins

Customize CTA Colors

A CTA needs to be eye-catching. How else will it call any of your visitors to action? With that in mind, we want to go into theย Design tab for the CTA module and find theย Button heading. Under it,ย enableย the toggle that readsย Use Custom Styles for Button.

custom styles

We are going to keep it simple and have the button in the CTA match the existingย Portfolio button from the header layout. Setย Button Text Color toย white (#ffffff),ย Button Background toย #fe5a25,ย Button Border Width toย 4px, andย Button Border Color toย white (#ffffff).

Once youโ€™ve finished customizing the design to match your existing layout, save your work by clicking the greenย Save button in the lower-right corner and then click theย X icon in theย  upper-right to return to the theme builder.

cta saving

In the Theme Builder, make sure the green button above saysย All Changes Saved. If it saysย Save Changes, the updates youโ€™ve made arenโ€™t live yet.

all changes saved

Final Results for the Call to Action Module

When youโ€™re finished with all the customizations, your site should appear similar to this:

Desktop

desktop preview

Mobile

mobile results

Conclusion

Adding a Call to Action into your Divi siteโ€™s secondary menu bar is a pretty simple process. Having a CTA module appear at the very top of your pages can be an incredible way to engage your audience. Users can get desensitized to pop-ups and various modals, but a good, old-fashioned call to action never fails to get their attention.

How do you use Calls to Action on your websites? Let us know in the comments!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! ๐Ÿ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow ๐Ÿ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How ๐Ÿ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Everything You Need To Know Design Variables In Divi 5

Everything You Need To Know Design Variables In Divi 5

Posted on April 14, 2025 in Divi Resources

Design Variables is the newest feature rollout in the latest Divi 5 Alpha. They bring an efficient approach to web design to the Divi ecosystem. Far more than just a time-saving tool, they allow you to define reusable design elements, like colors, fonts, and sizes, that update instantly across your...

View Full Post

1 Comment

  1. Great layout guys!

    I’ve followed the tutorial but I’m not getting the CTA button showing fully on any display size. I’m not too sure what I am doing wrong on this one!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today