Create Call to Action Button in the Divi Menu

Last modified Oct 14, 2020
Difficulty Beginner
Language CSS

One of the most important web elements is the call to action. These can take the form of buttons placed throughout the site, but adding them into unconventional places can be great for catching a site visitor’s eye. One place that you should consider adding call to action buttons is in the Divi menu.

In the following tutorial, you’ll learn how to create an attractive and eye-catching call to action button for your Divi mobile menu.

Looking for the code? Skip the step-by-step Divi tutorial and jump straight to the code library.

Adding a call to action to the Divi menu

An often neglected web element is the navigation menu. Typically, it falls within the site header, along with the logo and possibly social media icons too.

To spice up your web design, you can easily create a stand out call to action from a Divi menu item. Instead of it displaying as per normal, as just a piece of text, with a  little bit of CSS, you can style a menu item to look like a button.

Before you get started on this tutorial, please run a backup of your site before making any code edits and tweaks.

How to add a call to action button to the Divi mobile menu

This tutorial will be in a few parts:

  • First, you need to create a menu and add the call to action button
  • Next, you’ll need to add a custom class to the call to action menu item
  • Finally, you’ll need to style the menu item using CSS

Let’s dive in!

Step 1: Create a WordPress menu

Navigate to Appearance > Menus and create a new menu. Be sure to include the page for the call to action. I’ve created a page titled “Schedule a Call”. This will entice site visitors to book a call with me.

Make sure this is set to the Primary menu. Remember to click the Save menu.

Divi tutorial call to action button navigation menu back end

Adding a call to action menu item to a WordPress menu

On the front-end, the menu will look something like this:

Divi tutorial call to action button navigation menu set up

Example of the navigation menu

Step 2: Add a custom class to the call to action menu item

Return to the Appearance > Menus console. At the very top of the page, click the Screen Options tab and make sure that CSS Classes is selected. If not, select it by clicking the checkbox. This option will automatically update.

Divi tutorial call to action button screen options css classes

Click on the Screen Options drop-down menu to display more options

Then, locate the menu item that you want to customize to be the stand-out call to action button. In my example, it is the Schedule a Call menu item.

Click the small drop-down arrow to open up the menu customization options. In the field that says CSS Classes (optional), add the text: menu_cta

Divi tutorial call to action button add css class to menu item

Assign a unique class to the menu item

Click Save Changes.

Now, you have just added a custom class to the menu. Next, we’ll use this class to target the specific menu item, and style it using CSS.

Step 3: Customize the call to action button with CSS

Now it’s time to customize the look and feel of the call to action button using CSS. You can add CSS to Divi in several ways. Our preferred method is to use the CSS stylesheet in our child theme.

If you don’t have a child theme already set up, you can download one for free here. If you need a bit more information about child themes and how to use it, read our handy Divi child theme guide.

Once your child theme is up and running, head over to Appearance > Editor and select the stylesheet. Copy the following code and paste it into the style.css file.

/* Divi call to action button normal state */ 

@media (min-width: 980px) {
.menu_cta {
padding: 0!important;
border-radius: 30px;
border: solid 2px #19ba97; /* change the color of the border */
transition: 0.3s;
background-color: #19ba97; /* change the color of the background */
}
.menu_cta a{
color: #f4f4f4!important; /* change the color of the button text */
padding: 15px 30px 15px 30px!important;
}

/* Divi call to action button hover state */ 

#top-menu-nav .menu_cta a:hover {
opacity: 1;
}

.menu_cta:hover {
border: solid 2px #fe8400; /* change the color of the hover border */
background: #fe8400; /* change the color of the hover background */
}
}

When complete, click Update file.

The code includes a regular display state and a hover state change. I’ve added a green color to match the site design, and an eye-catching Divi Space orange for the hover color.

There are comments in the code that’ll instruct you on which variables to change to add your own colors.

Styling the call to action button in the Divi menu

If you’d like to create a different look and feel for your Divi mobile menu, copy and paste the following code into your stylesheet.

Option 2

This will create a gray call to action button.

Divi tutorial call to action button grey button

Create a striking gray menu item using CSS

 

@media (min-width: 980px) {
.menu_cta {
background-color: #f2f2f2;
background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
border: 1px solid #bfbfbf;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
color: #8c8c8c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 3px;
font-family: Verdana, sans-serif;
transition: all 20ms ease-out;
}
.menu_cta:hover {
background: #f2f2f2;
border-color: #8c8c8c;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}

.menu_cta a{
color: #23282d!important;
padding: 12px 30px 12px!important;
}
}

#top-menu-nav .menu_cta a:hover {
opacity: 1;
}

Option 3

This will create a blue call to action button.

Divi tutorial call to action button blue button

Create a striking blue menu item using CSS

@media (min-width: 980px) {
.menu_cta {
width: 160px;
height: 46px;
background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%);
border-radius: 5px;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
text-indent: 5px;
cursor: pointer;
}
.menu_cta:active {
box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
top: 1px;
}
.menu_cta:after {
content: '';
width: 0;
height: 0;
display: block;
border-top: 22px solid #187dbc;
border-bottom: 22px solid #187dbc;
border-left: 16px solid transparent;
border-right: 20px solid #187dbc;
position: absolute;
opacity: 0.6;
right: 0;
top: 0;
border-radius: 0 5px 5px 0;
}

.menu_cta a{
color: #fbfbfb;
font-family: 'Open Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
text-align: left;
padding: 15px 30px 15px 12px;
}
}

#top-menu-nav .menu_cta a:hover {
opacity: 1;
}

Option 4

This will create an orange call to action button with a phone icon.

Divi tutorial call to action button orange button with icon

Create a striking orange menu item with an icon using CSS

@media (min-width: 980px) {
.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}
.menu_cta a {
color: #fff !important;
padding: 10px 15px 10px 35px !important;
}

.menu_cta a:before {
content: '\e090';
color: #fff;
font-family: 'ETmodules';
font-size: 16px;
line-height: 1;
position: absolute;
left: 12px;
}
}

Option 5

This will create an orange call to action button.

Divi tutorial call to action button orange button

Create a striking orange menu item using CSS

.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}

.menu_cta a {
color: #fff !important;
padding: 15px 15px 15px 15px !important;
}

Ending thoughts

Changing up the look and feel of your website is great for keeping your site visitors engaged and entertained. One way to catch their attention is by adding interesting buttons and call to action in unique places.

We hope you’ve enjoyed this tutorial and that it has increased the user experience of your site.
Let us know which Divi tutorials and quick CSS snippets you’d like to see in the future! Comment your snippets requests below!

CSS

@media (min-width: 980px) {
.menu_cta {
padding: 0!important;
border-radius: 30px;
border: solid 2px #fff;
transition: 0.3s;
}
.menu_cta a{
color: #fff!important;
padding: 15px 30px 15px 30px!important;
}

#top-menu-nav .menu_cta a:hover {
opacity: 1;
}

.menu_cta:hover {
border: solid 2px #fe8400;
background: #fe8400;
}
}

 

@media (min-width: 980px) {
.menu_cta {
background-color: #f2f2f2;
background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
border: 1px solid #bfbfbf;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
color: #8c8c8c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 3px;
font-family: Verdana, sans-serif;
transition: all 20ms ease-out;
}
.menu_cta:hover {
background: #f2f2f2;
border-color: #8c8c8c;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}

.menu_cta a{
color: #23282d!important;
padding: 12px 30px 12px!important;
}
}

#top-menu-nav .menu_cta a:hover {
opacity: 1;
}

 

 

@media (min-width: 980px) {
.menu_cta {
width: 160px;
height: 46px;
background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%);
border-radius: 5px;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
text-indent: 5px;
cursor: pointer;
}
.menu_cta:active {
box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
top: 1px;
}
.menu_cta:after {
content: '';
width: 0;
height: 0;
display: block;
border-top: 22px solid #187dbc;
border-bottom: 22px solid #187dbc;
border-left: 16px solid transparent;
border-right: 20px solid #187dbc;
position: absolute;
opacity: 0.6;
right: 0;
top: 0;
border-radius: 0 5px 5px 0;
}

.menu_cta a{
color: #fbfbfb;
font-family: 'Open Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
text-align: left;
padding: 15px 30px 15px 12px;
}
}

#top-menu-nav .menu_cta a:hover {
opacity: 1;
}

 

@media (min-width: 980px) {
.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}
.menu_cta a {
color: #fff !important;
padding: 10px 15px 10px 35px !important;
}

.menu_cta a:before {
content: '\e090';
color: #fff;
font-family: 'ETmodules';
font-size: 16px;
line-height: 1;
position: absolute;
left: 12px;
}
}

 

.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}

.menu_cta a {
color: #fff !important;
padding: 15px 15px 15px 15px !important;
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.0.2 of the Divi Theme and Divi Friendly Hosting with PHP 7.3.
If you think this code saved you time, we will be happy to receive a comment!

____

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, October 22, 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

4 Comments

  1. Anushka

    Thanks for this but how do I get the cta button to appear the same on mobile?

    Reply
  2. Patrick Finney

    But, given the tools afforded with 4.0, wouldn’t the best approach now be to just place the menu into a column by itself and a button module one more column to the right?

    Reply
    • Anna Kurowska

      That depends on your design. This solution works if you are using the standard menu and the Divi Menu Module.

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.