Adding a CTA Button to the Divi Menu

To add a CTA button (Call to Action) is fairly simple.
You just need to include a piece of code into the menu tab css options area: menu-cta
Then you just need to all a bit of CSS to the Divi CSS area.

There is a great tutorial by Josh Hall on how to do this here.

It will take a little editing of the CSS to change the colours to work with your site but it’s pretty easy to do.
You may also need to edit the padding, again easily done.

I’ve added Joshs code below…
This will work well on a dark menu bar, on a light menu bar get the code further below.

 DARK

/*—————Menu CTA Button—————*/
#top-menu li a:hover {
opacity: .7!important;
}            

.menu-cta a {   
border: 2px solid #69b957!important;   
padding: 12px!important;   
border-radius: 5px;   
text-align: center;
color: white!important;
background-color: #69b957;
}
.menu-cta a:hover {   
background-color: #69b957;   
color: white!important;
}
.et_header_style_left #et-top-navigation {   
padding-top: 16px!important;
}
.et_header_style_left .et-fixed-header #et-top-navigation {   
padding-top: 6px!important;
}
/*—————CTA Button Color on Fixed Navigation—————*/
#main-header.et-fixed-header .menu-cta a {
color: #fff !important;
}
/*—————Menu CTA Button Mobile Settings—————*/
@media only screen and (max-width: 980px) {
.menu-cta a {   
background-color: #69b957;   
}
}

We used a CTA Menu button on the following sites:

Bay Building Inspections