How to Create a Call To Action Button for the Divi Menu

by | Dec 13, 2017 | Divi Tutorial | 57 comments

In this tutorial, I show you How to Create a Call To Action Button for the Divi Menu. Have you ever wanted to put a button in your Divi menu? By default, Divi’s menu options are slim but with just a little CSS magic, you can really make menu items come to life. This is incredibly useful for call to actions like “Contact Us,” or “Get a Quote” or “Get Started.” The goal here is to create a nice button for your users eye to end on that makes them want to click or at least hover over.

Now there are numerous ways to do this but in this tutorial, I show you how to do it without the use of an external plugin, without adding an image in the menu or without trying to past the Divi button code in the menu (which can certainly cause issues.) This method is most similar to Geno’s Transform a Divi Menu Item Into a CTA Button method but has slightly different code and this one works on mobile. After all, if there’s a nice call to action button in the menu on desktop, it should be there on mobile too! With just a handful of lines of CSS, we can add a sleek, modern and eye-catching call to action button in the Divi menu. Enjoy and have some fun!

***Revised Code (6/28/18)***

A day after I launched this tutorial, I figured out a way to eliminate the “height” code from above. By editing JUST the .menu-cta a element, we can bypass having to edit the container around the link. So the while the CSS below is very similar to what’s above, it saves you a few lines and just adjusts the link itself. Enjoy!


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