So we all should know by now how important it is to have a Call To Action on the home page of your website. And there are plenty of articles that explain why. In fact there are plenty of debates as to where it should be, what color works best, where it should lead and so forth.

One popular place to put a call to action button is in your main menu and why not? Its on every page, it’s always accessible and it is pretty valuable real estate.

So in this tutorial I will walk you through the steps of turning one of your Divi menu items into a very visible Call To Action Button like the one on the featured image above.

Lets Get Started

 

First thing you need to do is create a custom menu.

1. Go to Appearance>Menu

001

 

2. Select the pages you want in your menu and select Add To Menu

002

 

3. Adjust the menu settings so that it is set as your primary menu and so that all new pages are automatically updated to this menu

003

 

4. Adjust your screen options to include CSS Classes in your menu items.

004

 

5. Assign a class to the menu item that you want to turn into a CTA button. In this case I want people to contact me. So I will rename the Contact Me button to Get Started and give it a class called “get-started”

005

 

6. Now select Save Menu

006

 

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS.

(This code includes the mobile query to keep in friendly on your smaller devices)


/*------------------------------------------------*/
/*-----------------[CTA Menu Item]----------------*/
/*-----------------[by GenoQuiroz]----------------*/
/*------------------------------------------------*/

/* style the get started cta button */
    		.get-started {border-radius: 0px;}
    		.get-started a {color: #fff!important;}
    		li.get-started {
        		background-color:#ed7818; 
        		font-weight: 700; 
        		text-transform: uppercase; 
        		text-align: center; 
    			padding: 12px 13px 10px 10px!important;
			border-radius: 3px;
        		-moz-transition: all 0.5s; 
        		-webkit-transition: all 0.5s;
        		transition: all 0.5s;}
    		li.get-started:hover {background-color:#c96310;}

/* fixed header button text color */
                 .et-fixed-header #top-menu .get-started a {
                        color: #fff!important;}
		.get-started li.current-menu-ancestor > a, .get-started li.current-menu-item > a {
    				color: #fff !important;}



	@media only screen and (min-width : 981px) {
    		li.get-started {height: 33px;}}

 

And with this trick even your mobile menu has a Call To Action

008

 

 

Text Color Changes When I Scroll Down?

In some cases, if you have added a custom color to the active link in the Customizer settings (Fixed Navigation Settings Only), the text color may still change when you scroll down. Its best to leave that option blank. But you can still change the active menu link in the Primary Menu Bar settings and it still works with a fixed header.

But if you must change the color to the active link in the Customizer settings – Fixed Navigation Settings, then here is another css trick that works. Credit to Kathy Kroll Romana for contributing this fix.

Where xxx is the specific numerical identifier for the specific menu item. You will find this number by right clicking on the menu item in your browser and selecting “inspect element”

 

.et-fixed-header #top-menu li.menu-item-xxxx > a {
    color: #ffffff !important;}

 

 

OPTIONAL MODIFICATION

The above code works best if your CTA button does not use a drop down menu. If your CTA button has a drop down menu, you will have to add some more CSS which will remove the CTA highlights in the mobile menu.

 

/* ADD THIS ONLY IF YOUR CTA BUTTON HAS A DROP DOWN MENU */

/* style the get started cta button drop down menu */
	li.get-started li a {
		color: #666!important;
		width: 160px;
		text-transform: none;
		font-weight: normal;
		background-color:#fff;}


/* mobile menu adjustments */
	.et_mobile_menu li a {padding: 10px 5%; line-height: normal;}

	.et_mobile_menu li.get-started {
		background-color: #fff;
		padding-left: 0px;
		text-align: left;}

	.et_mobile_menu li.get-started a{
		color: #f00!important; font-weight: 900;}

 

Now you will probably have to adjust the colors to match your custom font and background colors. Just find the 6 digit hex codes of the colors you want to use and replace them in this code accordingly.

And now your mobile menu will look something like this…

Β 009

 

You Can See My Live Example Here

 


Well that’s all for now. I hope you find this article useful.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!