How to create a call to action button in the menu

In this tutorial, you will learn how to create a call to action button in your Divi menu. A strong call to action on every page can be very powerful and get you more engagement with your website visitors. You can direct your visitors to a contact, quote or a landing page. You can even make it a phone number. You can see a live example here:

Step by step guide

Step 1

The first step you need to add a CSS class to the menu page that you want as a button.

in your WordPress dashboard navigate to Appearance > Menus

Add the CSS class cta_menu to the menu page.

Add CSS class

If you don’t see the CSS class field then you need to enable it. You can do this as follow:

Go to the screen options (upper right corner) and check CSS classes.

Step 2

Add the following CSS in Divi > Theme options > Custom CSS or in your child theme CSS style sheet. If you don’t know how to create a child theme you can follow this tutorial.

/* ##### CALL TO ACTION MENU BUTTON ##### */

@media only screen and ( min-width: 981px ) {
.cta_menu a {
    background-color: #2eb243;
    padding: 15px 25px !important;
    border-radius: 25px;
    text-transform: uppercase;
    color: #fff !important;
    box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.1);
}

.et-fixed-header #top-menu .cta_menu a	{
     color: #fff !important;
}}

To change the background color of the button you can change the color code in:
background-color: #2eb243;

To change the font color you can change the color code in:
color: #fff !important;

33 thoughts on “How to create a call to action button in the menu”

  1. Thanks a million Mark-just what the doctor ordered.
    Keep ’em coming as your instructions as very clear and easy to follow. Thank you.

    Reply
  2. Yes, easy indeed…
    Will try to do it.
    Thanks!

    Do you know how to add javascript code (which generates every day changing data) in the header (secondary menu)?

    Reply
    • I only created this for desktop. But if you remove this:
      @media only screen and ( min-width: 981px ) {

      and

      }

      at the end then it will show up on mobile as well

      Reply
  3. Thanks, Mark, very easy with clear instructions. I have an issue with a line going through the button due to the fact that there is an underscore line for the selected tab in the navbar.

    Is there any way of removing this line?

    I look forward to any suggestion you may have.

    B

    Reply
  4. Hi Mark, thank you for an amazing tutorial! ? It’s simply perfect, but I’m having a small issue here – whenever the code is applied and I just arrive to the page – the button looks good. Once I’m trying to scroll the page down – the background colour+border drops down as well. Wondering what I’m doing wrong?

    Reply
  5. Thanks Mark for this tutorial, But it seems it does not display on mobile and tablet. I removed what you asked to remove but still it does not work.

    Reply
  6. Hey Mark! Thanks for this!

    Any way to place the button on the top left hand side of the secondary menu
    and not the right side?

    Here’s a screenshot:

    https://cl.ly/b2ba900deb77

    We placed a graphic at the top left hand side using CSS, but it’s not as good
    looking and effective as your method.

    Thanks so much!

    Sincerely, Leo

    Reply
  7. Cant make it work

    1) Created at custom link in my Main menu and the CSS class cta_button
    2) Inserted the code:

    /* ##### CALL TO ACTION MENU BUTTON ##### */

    @media only screen and ( min-width: 981px ) {
    .cta_menu a {
    background-color: #ef4138;
    padding: 15px 25px !important;
    border-radius: 25px;
    text-transform: uppercase;
    color: #fff !important;
    box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.1);
    }

    .et-fixed-header #top-menu .cta_menu a {
    color: #fff !important;
    }} in custon CSS

    But its not colored (changed it to red red to match the top navi

    Great Webly theme by the way πŸ˜‰

    Reply
  8. WOW, this is so nice – thank you!!
    Would it be possible to use the button to activate an optin from bloom as well? Would be very cool πŸ˜‰

    Reply

Leave a Comment

23 Shares
Share20
Pin3
Tweet