Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Originally posted on Mar 24, 2015.
Updated on Nov 26, 2020.

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 */
		@media only screen and (min-width : 981px) {
			.get-started {
				border-radius: 0px;}
			.get-started a {
				color: #fff!important;}
			li.get-started {
				background-color:#0777c3; 
				font-weight: 700; 
				text-transform: uppercase; 
				text-align: center; 
				padding: 14px 13px 14px 10px!important;
				border-radius: 1px;
				-moz-transition: all 0.5s; 
				-webkit-transition: all 0.5s;
				transition: all 0.5s;
				height: 41px;}
			li.get-started:hover {
				background-color:#0777c3;}
			.get-started a:hover {
				opacity: 1!important;}}

	/*make sure get started CTA text is white even when menu is fixed */
		@media only screen and (min-width : 981px) {
			.et-fixed-header #top-menu li.current-menu-ancestor>a#mp_get_started, 
			.et-fixed-header #top-menu li.current-menu-item>a#mp_get_started,
			.et-fixed-header #top-menu li.current_page_item>a#mp_get_started,
			.et-fixed-header #top-menu a#mp_get_started {
				color: white!important;}}

 

Making Sure This Applies to The Current or Ancestor Pages

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 PHP trick that works.

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”. You can add this to your Functions.php file

/* === Add ID to Contact Us menu item === */
add_filter( 'nav_menu_link_attributes', 'mp_add_id_to_contact_us_button_link', 10, 3 );
function mp_add_id_to_contact_us_button_link( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = xxx;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['id'] = 'mp_get_started';
  }
  return $atts;
}

 

 

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

 


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


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest