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 from Switch MSP and chage out the green.

 

/*---------------Menu CTA Button---------------*/
#top-menu li a:hover {opacity: 1!important;}
            
.menu-cta a {
    border: 2px solid #ffffff4f!important;
    padding: 12px!important;
    border-radius: 25px;
    text-align: center;
}
.menu-cta a:hover {
    background-color: #8dc63f;
    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: #8dc63f;
    }
}

We used a CTA Menu button on the following sites:

Switch MSP

Looking to get your business seen? Then see us.

Web Site Developer Auckland | North Shore | Matakana | Warkworth | Omaha

Call 021 158 1400 for Web Design North Shore, Auckland

Share This