Create Call to Action Button in the Divi Menu

Last modified Oct 30, 2019
Difficulty Beginner
Language CSS

Useful links

✅ Related post: How to Create a Call to Action Button in the Divi Menu 

WordPress comes with a navigation menu that makes it quite easy for beginner users. However, if you are brand new with WordPress or need a refresher, read this guide which covers the basics: how to create a menu and menu items.

1. Add custom class name to a menu item

  1. Login to the WordPress Dashboard.
  2. From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’.
  3. Locate the menu item that you want to customize
  4. Add custom class name to your menu item: menu_cta

If you don’t see the box to enter your custom CSS class click on “Screen Options” on the top right of your menu dashboard to enable it.

2. Add custom CSS

Snippets are below.

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.

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;
}

 

Your Comments

2 Comments

  1. 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

      Yes that works if you are using Divi Menu Module to build your header.

Submit a Comment

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

Receive notifications about our new blog posts.

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add JavaScript and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More

Don't Miss The Sale and Chance to Win a Lifetime Membership!

(Over $4000 Value)

Fill the form below. We will send you details on how to win a Lifetime Membership! Good luck and have fun! 

You will also get notified right when the sale goes live! 

Great you've entered our giveaway! Please check your email!