Transform a Divi Menu Item Into a CTA Button

Transform a Divi Menu Item Into a CTA Button

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)


/* adjust the padding of the top menu navigation bar */
	#main-header { line-height: 0px; padding-top:14px;}
	#main-header nav#top-menu-nav {padding-top: 0px;padding-bottom: 10px;}

/* adjust the padding of the top menu navigation items */
	#main-header.et-fixed-header nav#top-menu-nav {padding-top: 0px;}
	#top-menu li { padding-top: 20px; }
	#top-menu li li a, .fullwidth-menu li li a {padding: 0px 20px; line-height: normal;}

/* adjust the padding and height of the fixed header logo (when scrolled down) */
	.et-fixed-header #logo {
		max-height: 39px;
		padding-top: 1px;}

/* style the get started cta button */
	.get-started {border-radius: 5px; height:20px;}
	.get-started a {color: #fff!important;}
	li.get-started {
		color:#fff!important;
		background-color:#e34646; 
		font-weight: 700; 
		text-transform: uppercase; 
		text-align: center; 
		padding-left:20px; 	
		padding-right:20px!important;
		-moz-transition: all 0.5s; 
		-webkit-transition: all 0.5s;
		transition: all 0.5s;}
	li.get-started:hover {background-color:#b41b1b;}

 

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

008

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.

Designs By Geno Quiroz

 

Help Me Come Up With More Useful Tutorials and Keep Them Free!

$
Personal Info

Donation Total: $25


 

Carpe Diem Banner Ad

 

Geno Quiroz
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, experimenting with new technologies, and adding more monitors to his desktop workstation (currently at 5). When not doing any of the above, you can find Geno blogging here or writing Divi customization tutorials over at his very own Entrepreneurs Blog on Quiroz.co.

83 Comments

  1. Thanks for the tutorial with the sample code, Geno! I never considered this, but I’ll definitely do so in one of the pages I’ll develop soon. 🙂

    Reply
    • Cool. Please share when you do 😀

      Reply
  2. Wow! Brilliant tutorial, thank you! I would like to use this as a ‘safe exit’ button for a charity website so that it is clear and stays on the screen at all times… Would I be able to link it out to another site rather than have it linked to a page (you selected the ‘contact me’ page)? I hope this makes sense?? Cheers, Cat 🙂

    Reply
  3. Thank you for your reply 🙂 I have done this now, and added the above to make it a button too! It has worked perfectly… thank you thank you 🙂

    Reply
    • Awesome! Thanks for letting me know it worked 🙂

      Reply
  4. Good stuff, Geno. Just like I like it: CSS and no plugins. 🙂

    I’m working on a massive financial site right now; sure am going to look into using this for a subtle CTA opt-in option!

    Reply
  5. Geno,
    Well written manual. Thanks for sharing it.

    Reply
  6. Nice tweak and you’ve a reliable source for Divi tweaks! Keep up th flame, one love.

    Cheers!

    Reply
  7. Thank you so much! Such a big help!

    Reply
  8. Geno… any chance you know how to get it to fly in from the right? maybe with a little delay… I’m not doing so hot, on figuring that out.

    Reply
  9. Sir you are genius… I thank you.. I always wanted to have that button… you made it so easy!

    Reply
  10. How can I achieve the same effect but with a full width header?

    Reply
    • 1. Complete steps 1-6
      2. Add this particular menu to your fullwidth menu module
      3. You will still use this code…

      /* style the get started cta button */
          .get-started {border-radius: 5px; height:20px;}
          .get-started a {color: #fff!important;}
          li.get-started {
              color:#fff!important;
              background-color:#e34646; 
              font-weight: 700; 
              text-transform: uppercase; 
              text-align: center; 
              padding-left:20px;  
              padding-right:20px!important;
              -moz-transition: all 0.5s; 
              -webkit-transition: all 0.5s;
              transition: all 0.5s;}
          li.get-started:hover {background-color:#b41b1b;}
      

      But you should assign a CSS Class to your fullwidth header and section and you will have to use that name to target the padding adjustments to get it just right. You can still basically focus on the same properties I targeted in the top menu and main header. But you will be targeting the fullwidth section and fullwidth menu itself instead of top-men and main-header.

      Reply
  11. Thanks a lot for the helpful hint Geno.
    One question I have is how to make the color of the CTA button stay on behind the button permanently?
    I mean have it so that it doesn’t appear only when people hover over the button?
    Tried fiddling around with the css, but no go?

    Reply
    • Im not sure what you mean Benjie. On the code I gave you above, the modified background color on the CTA stays a solid color permanently even when it is not hovered over.

      Reply
      • The button that I applied the code to doe not seem to have the permanent color behind it.
        Mind if I shoot you an email with an image of what I mean? Can’t seem to make attachments on here. Or if you prefer, I could copy and paste the code here.

        Thanks for the reply!

        Reply
        • Send me an email with a link to the site and a picture of what you would like to see. If it’s not something I have already done or not an easy fix, then I can put together a quote for how much it would cost to do for you.

          Reply
  12. Hi! I even managed to change the color! 😉
    One question, probably a real newbie-one, but that is because I am!
    I have added the code in the custom-CSS-field that allows the logo to be “taller than normal Divi-settings” (kindly provided by one of you gurus if I’m not mistaken):

    /*— Logo Size —*/
    html #main-header #logo {
    max-height: 150px ;
    min-height: 100px ;
    padding-top: 0px ;
    padding-bottom: 0px ;
    margin-top: -9px ;
    }

    Will this in some way collide with:
    /* adjust the padding and height of the fixed header logo (when scrolled down) */
    .et-fixed-header #logo {
    max-height: 39px;
    padding-top: 1px;}

    from above?

    It works fine on the page right now, but I don’t know, maybe it’s a trap? 😉 Maybe it has nothing to do with eachother, but I don’t want to confuse any browsers… Thanks in advance! And thank you for providing strings of code (or as I call it, magic) so generously!

    Reply
    • Good job Veronika. This code should work just fine 🙂

      Reply
  13. Geno, one question. If I am on the page the CTA points to and the site is running a “Color Scheme” the text in the button is the color of the scheme instead of white. Is there anyway to override this back to white? Thank you.

    Reply
    • Sure. You just have to target the active menu item rule and override it. Send me a link to the page in questions.

      Reply
        • Looks like you got it. It is currently showing as white.

          Reply
          • Well, I figured out the reason why you weren’t seeing the problem. Would you mind taking a look at that link again?

          • This code changes your active menu item font color for all the menu items. You will just have to play around with this until you can figure out how to target that specific button.

            .et_color_scheme_orange #top-menu li.current-menu-item > a {
              color: #fff!important;
            }
            
    • It would be easier to leave the color scheme as default and add your own color scheme manually using CSS.

      Reply
  14. Is there a way to change the background color?

    http://note.io/1J73ZQ1

    My default “active” URL color is orange and it’s a bit hard to see as is.

    Thanks, Geno. I made a donation based on this. You’re very good at this.

    Reply
    • Thanks Phil. Just change the background-color value in these two rule sets.

      li.get-started {
              color:#fff!important;
              background-color:#e34646; 
              font-weight: 700; 
              text-transform: uppercase; 
              text-align: center; 
              padding-left:20px;  
              padding-right:20px!important;
              -moz-transition: all 0.5s; 
              -webkit-transition: all 0.5s;
              transition: all 0.5s;}
      
          li.get-started:hover {background-color:#b41b1b;}
      
      
      Reply
    • Thanks Leslie. Your spotlight on ET inspired me when it first came out. So stoked to have you here for a visit 😀

      Reply
  15. Geno, this is a great tut! I’m having an issue on the ipad though.. When the ipad is in landscape mode (so its not the mobile style menu), my button isn’t clickable. I’m using the dropdown approach so it should open the dropdown menu and it doesn’t…

    Reply
    • Share a link to your page so I can take a look when I get a chance.

      Reply
      • Thanks, Geno. I had actually done some color modifications and realized when I looked back into that I could easily do that I wanted with WordPress functionality alone so I just removed this functionality and started over. But thanks for getting back so quickly! If I do end up using it in the future, I’ll come back to you.. =)

        Reply
  16. Sadly I’m not being able to pull this off, I’ve got no idea why… I’m using a child theme AND I also have CSS Hero active but I didn’t do anything to the buttong with CSS hero, any ideas?

    Reply
    • Your custom styling of the nav area is what is changing this for your site. To fix this replace this

      li.congtacto {
        color: #fff!important;
        background-color: #e34646;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px!important;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
      }
      

      with this

      li.congtacto {
        color: #fff!important;
        background-color: #e34646;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px!important;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      
      Reply
      • OMG! You went all the way to inspect my code, you are amazing! Thanks a lot man!… although, I did the changes and still nuttin’ 🙁

        Reply
        • It seems to be working on my end. Try clearing the cache on your browser.
          Kong

          Reply
          • Duh, you are right, thanks a LOT man! Geezus, looking at your blog and then this? I´m your fan man, thanks for all the Divi mod tips, I’ll invite you a beer now!

        • Thanks Alex. I appreciate it. I think I will have that beer now 😀

          Reply
  17. Hi Geno! Thanks for all the great tutorials! I was able to implement the CTA in the menu, and it works great. I have an issue with the mobile menu (http://www.natashajapp.com/picture_library/menu.png), and was able to narrow it down to the #main-header { line-height: 0px; padding-top:14px;} line in the css code. Without it, mobile menu looks ok, but button is messed up. Any ideas on how to fix it? Thanks! 🙂

    Reply
    • Hi Natasha. Not sure. I would need to look at the site.

      Reply
        • Add this to your stylesheet.

          @media only screen and (max-width: 980px){
          .et_header_style_centered #main-header .mobile_nav {height: 24px;}}
          
          @media only screen and (max-width: 980px){
          .et_header_style_centered .mobile_nav .select_page {padding-top: 12px;}}
          

          If that does not work add this instead.

          @media only screen and (max-width: 980px){
          .et_header_style_centered #main-header .mobile_nav {height: 24px!important;}}
          
          @media only screen and (max-width: 980px){
          .et_header_style_centered .mobile_nav .select_page {padding-top: 12px!important;}}
          
          Reply
          • You are the BEST! First code worked like a charm!!

  18. Awesome work Geno, thanks a lot ! I tried to have this button in the Top Menu but it doesn’t displays well, would you have a solution please ? Thanks !

    Reply
    • Possibly. What do you mean when you say it does not display well?

      Reply
    • Thats because your current page link color is set to #cd5c5c which is based on the color scheme you set in the customizer. You will have to change that color or target this specific page. Try adding this to your epanel

      .et_color_scheme_red #top-menu li.current-menu-item > a {
        color: #fff!important;
      }
      
      Reply
  19. I was very happy to find this post, it has worked really well on my test page, until I updated Divi last night 🙂 I have enlarged the logo a bit, so the red background went above the menu item. I managed to put it back, just it destroyed the header’s ability to get smaller when scrolling down. Could you help how to do it with Divi 2.4?

    Reply
    • Yes we will be updating the tutorials to include the code for 2.4 over the next few weeks.

      Reply
  20. Hi, Geno-
    Will you update this post with the new Divi 2.4 update? My CTAs in the menu are off on the website I updated to 2.4. Is anyone else having difficulties? Mary 🙂

    Reply
    • Yes we will be updating the tutorials to include the code for 2.4 over the next few weeks.

      Reply
  21. I updated my Divi site from Divi 2.3 to Divi 2.4 and this happened:

    http://counterpointcreativeconsulting.com/wp-content/uploads/2015/06/Menu-Item-CTA-background-to-small.png

    So, I changed the

    .get-started {border-radius: 5px; height:20px;}

    to

    .get-started {border-radius: 5px; height:50px;}

    which looked better but this happens on mobile

    http://counterpointcreativeconsulting.com/wp-content/uploads/2015/06/Menu-Item-CTA-background-Mobile-50px.png

    Anyone else have this issue with Divi 2.4?

    Reply
    • Try reducing the bottom padding on the mobile menu link.

      Reply
      • Thanks Geno, I actually went ahead and restored a copy of Divi 2.3 dues to other issues as well. It turned my site into a mess. I did so before your suggestion so Im not sure if that worked.

        Reply
      • I need to fix this also, where do I adjust the mobile padding bit?

        Reply
      • I’m having the same issue! Looks great on desktop but on mobile it looks too heigh and the text sits at the top.

        Reply
        • You can use mobile queries to reduce the height and font size on smaller screen sizes.

          Reply
    • I’m having the same problem

      Reply
  22. Hola!
    I have used this code and it looks like… it works 🙂

    /* adjust the padding of the top menu navigation bar
    #main-header { line-height: 0px; padding-top:14px;}
    #main-header nav#top-menu-nav {padding-top: 0px;padding-bottom: 10px;}*/

    /* adjust the padding of the top menu navigation items */
    #main-header.et-fixed-header nav#top-menu-nav {padding-top: 0px;}
    #top-menu li { padding-top: 15px; }
    #top-menu li li a, .fullwidth-menu li li a {padding: 0px 20px; line-height: normal;} */

    /* adjust the padding and height of the fixed header logo (when scrolled down) */
    .et-fixed-header #logo {
    max-height: 39px;
    padding-top: 1px;}

    /* style the get started cta button */
    .get-started {border-radius: 5px; height:45px;}
    .get-started a {color:#146B8E!important;}
    li.get-started {
    color:#fff!important;
    background-color:#ccc;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding-left:10px;
    padding-right:10px!important;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    margin-right: 100px;}
    li.get-started:hover {background-color:#fff;
    color:#fff!important;
    }

    Reply
  23. Hi Geno, this tutorial is perfect for what I want. I am having an issue with the text color when I scroll down. I need it to stay white however it is overridden by the following code: .et-fixed-header #top-menu a{color: #612f90 !important;}. Is there anyway I can override this? You can view the site at http://68.168.211.147/~jenwil/.
    I am using Divi 2.4
    Thanks,

    Reply
    • Try adding the code in the epanel using the color hex code you want.

      .et-fixed-header #top-menu a{color: #612f90 !important;}.
      
      Reply
  24. Nice tutorial but sad to see it’s not updated to 2.4 yet. Any updates on this? Thanks in advance 🙂

    Reply
    • Its working on 2.4 😀
      You might have to play around with the padding and margin though depending on what settings you have changed in the customizer. with all the new header customization options in 2.4, each site is different. But if you use the standard header with out any changes, it works great.

      Reply
  25. Hey Geno! How i can make the Button in the style of divi ghost button?

    Reply
    • Just remove the background color in the css. Use something like this

      background:rgba(0,0,0,0.0);
      

      The change the text color and the border color to be the same in the css as well.

      Reply
  26. who knew a menu button customization would be so popular?!!! awesome again, thanks, it worked!!

    Reply
  27. Great Tip! This is just like a miracle because two weeks ago i was thinking of how to achieve this when i saw it on http://conversionlab.no/ website. And here it is without paying a dime to anyone. You’re the best.

    But i have a question, how do i make the CTA (Get Started menu) still point to my contact form on one page website.

    Thank You

    Reply
  28. I am having the same issue. I just added that line of CSS and now I’m having the reverse issue. The text in the box stays white, but the rest of my menu disappears. How do affect just the box text and leave everything else alone. Thanks!

    Reply
    • Send me a link to your site and I will take a look when I get a chance.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest