How to Create a Call to Action Button in the Divi Menu

One of the most important pieces of a successful conversion-driven website is the Call to Action button nested in the menu bar. 

Menus work like a map for your website to give users the information they are seeking. It’s important to highlight the most important elements you want users to see, whether that’s a call to action with a phone number (if you expect a user to call you directly) or a link to your product page, services, or sign up page.

Examples of Call to Action Button in the Menu:

  • Google+
  • Facebook
  • Twitter
  • Google+
  • Facebook
  • Twitter
  • Google+
  • Facebook
  • Twitter

How to Create a Call to Action from a Menu Item

WordPress comes with a navigation menu that makes it quite easy for beginner users. However, if you are brand new with WordPress or need a refresher, read this guide which covers the basics: how to create a menu and menu items.

If you have already set up your menu, follow these steps to create a button for any link in the menu!

1. Add custom class name to a menu item

  1. Login to the WordPress Dashboard.
  2. From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’.
  3. Locate the menu item that you want to customize
  4. Add custom class name to your menu item: menu_cta

If you don’t see the box to enter your custom CSS class click on “Screen Options” on the top right of your menu dashboard to enable it.

2. Add custom CSS

At this point, it’s time to add some CSS to your website. CSS can be added in the following three ways:

If you don’t already have a child theme setup, you can create a blank one using the Divi Space Child Theme Generator. If you need assistance in using the child theme generator, read our blog post that provides easy step by step instructions on How to Use the Divi Space Child Theme Generator.

    • Google+
    • Facebook
    • Twitter

    For this tutorial, we’ll be using the Custom CSS box.

    To access it:

    1. Log into your WordPress dashboard.
    2. Go to “Divi > Theme Options” where you will find the Divi theme options.
    3. Go to the “General” tab (it should be the current one.)
    4. Add CSS code to box called “Custom CSS”.
    5. Click Save

    .menu_cta {
    background-color: #ff6900;
    color: #fff;
    padding: 0 !important;
    }

    .menu_cta a {
    color: #fff !important;
    padding: 15px 15px 15px 15px !important;
    }

    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter

    3. Adding an Icon

    You can optionally add the icon before text for tablet and desktop view.

    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter

    To do that, use the snippet below:

    .menu_cta {
    background-color: #ff6900;
    color: #fff;
    padding: 0 !important;
    }

    .menu_cta a {
    color: #fff !important;
    padding: 15px 15px 15px 15px !important;
    }

    @media (min-width: 980px){
    .menu_cta a:before {
    content: '\e090';
    color: #fff;
    font-family: 'ETmodules';
    font-size: 16px;
    line-height: 1;
    position: absolute;
    left: 12px;
    }

    .menu_cta a {
    padding: 15px 15px 15px 35px !important;
    }
    }

    You can change the icon by changing the content value in the code above.
    content: ‘\e090’; stands for phone. If you want to change it, for example, to shop icon, follow these steps:

     

    1. Head over to the Elegant Themes icon list and search for the icon you would like to use.
    • Google+
    • Facebook
    • Twitter

    2. The four digits that follow &#x in the html codes are the same last four digits you will need for typing out unicodes (if there only two digits after &#x, type 00 before the two digits).

    3. Find the Unicode number, in the example above for the cart icon it will be: e07a

    4. Replace the unicode number in the snippet above with the new one, taking care to leave the quotes and slash intact.

     

     

    4. Be sure to check how buttons look on mobile devices

    Mobile view:

    • Google+
    • Facebook
    • Twitter

    You can turn off styling for mobile devices. Insert the chosen snippet code inside of the media query.

    @media (min-width: 980px) { }

    You can learn more about using media queries in the article “Divi Media Queries

     

    Or don’t display menu item when the width is smaller than 980p by adding the code:
    @media (max-width: 980px) {
    .menu_cta {
    display: none;
    }
    }

    You can customize the call to action to fit your current website design. Here are some other CSS values you can play with

    • padding
    • color
    • background-color
    • border radius
    • font-size
    • font-family
    • font-weight
    • border
    • letter-spacing
    • box-shadow
    • …and hover statements 🙂

    If you are using a fixed Header, you may have to use a different color value for the button color to overwrite default settings in the Divi Theme Customizer.

    To do that, use .et-fixed-nav #top-menu selector. To learn more, read our The Divi CSS and Child Theme Guide.

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

    5. Snippets 🙂

    I created 5 different call to action designs. Choose the one that works for you!
    • Google+
    • Facebook
    • Twitter
    @media (min-width: 980px) {
    .menu_cta {
    padding: 0!important;
    border-radius: 30px;
    border: solid 2px #fff;
    transition: 0.3s;
    }

    .menu_cta a{
    color: #fff!important;
    padding: 15px 30px 15px 30px!important;
    }

    #top-menu-nav .menu_cta a:hover {
    opacity: 1;
    }

    .menu_cta:hover {
    border: solid 2px #fe8400;
    background: #fe8400;
    }
    }

    • Google+
    • Facebook
    • Twitter
    @media (min-width: 980px) {
    .menu_cta {
    background-color: #f2f2f2;
    background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
    border: 1px solid #bfbfbf;
    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #8c8c8c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    font-family: Verdana, sans-serif;
    transition: all 20ms ease-out;
    }

    .menu_cta:hover {
    background: #f2f2f2;
    border-color: #8c8c8c;
    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
    }

    .menu_cta a{
    color: #23282d!important;
    padding: 12px 30px 12px!important;
    }
    }

    #top-menu-nav .menu_cta a:hover {
    opacity: 1;
    }

    • Google+
    • Facebook
    • Twitter
    @media (min-width: 980px) {
    .menu_cta {
    width: 160px;
    height: 46px;
    background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%);
    border-radius: 5px;
    border-bottom: 4px solid #2b8bc6;
    color: #fbfbfb;
    font-weight: 600;
    text-indent: 5px;
    cursor: pointer;
    }
    .menu_cta:active {
    box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
    top: 1px;
    }

    .menu_cta:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    border-top: 22px solid #187dbc;
    border-bottom: 22px solid #187dbc;
    border-left: 16px solid transparent;
    border-right: 20px solid #187dbc;
    position: absolute;
    opacity: 0.6;
    right: 0;
    top: 0;
    border-radius: 0 5px 5px 0;
    }

    .menu_cta a{
    color: #fbfbfb;
    font-family: 'Open Sans', sans-serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,.4);
    text-align: left;
    padding: 15px 30px 15px 12px;
    }
    }

    #top-menu-nav .menu_cta a:hover {
    opacity: 1;
    }

    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter
    @media (min-width: 980px) {
    .menu_cta {
    background-color: #ff6900;
    color: #fff;
    padding: 0 !important;
    }

    .menu_cta a {
    color: #fff !important;
    padding: 10px 15px 10px 35px !important;
    }

    .menu_cta a:before {
    content: '\e090';
    color: #fff;
    font-family: 'ETmodules';
    font-size: 16px;
    line-height: 1;
    position: absolute;
    left: 12px;
    }
    }

    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter
    • Google+
    • Facebook
    • Twitter

    .menu_cta {
    background-color: #ff6900;
    color: #fff;
    padding: 0 !important;
    }

    .menu_cta a {
    color: #fff !important;
    padding: 15px 15px 15px 15px !important;
    }

    Final thoughts

    We hope you’ve found the information in this tutorial helpful. If you have any questions, ask them in the comments and while you’re there, let us know what future step by step guides you’d like to see here!
    Previous post
    Next post

    18 Comments

    1. B. T.

      Just what I was looking for. Thanks for the super clear tutorial!

      Reply
    2. Mark

      Thank you Anna!

      Reply
    3. Daniel Voiss

      Maybe include some more diverse use case options in the snippets, like the roofing example, or maybe examples with hover or animation effects? Other than that 👌🏼

      Reply
    4. Ian

      In the ‘Roofing Services’ image you show these in the secondary header as opposed to the primary menu, can you share the css for these too please?

      Reply
      • Anna Kurowska

        @Ian Roofing Services is our premium child theme and we don’t plan to include it in the tutorial. You can find it here: https://divi.space/product/roofing-theme/ Our goal was to keep designs simple, so they can match every website 😉

    5. Frank

      Great! Thanks!
      Now I only would like the button visible on mobile screen, next to the logo. (Logo left, hamburger menu right and cta button in the middle)
      Do you have extra code for that as well?

      Reply
    6. Fernanda

      Thank you, Anna! Amazing tutorial!

      Reply
    7. Dawn M Haun

      Hi, I am confused on what css class to use on the menu page. Do I add the snippet code?

      Reply
    8. David

      Usnig fixed nav – on scroll how can I make the text change colour?

      Reply
      • Anna Kurowska

        Hi David, we mentioned about this in the tutorial 🙂

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

    9. Nina

      This is great! My only issue is that the text color changes to a grey when the menu is fixed. How can I fix this so it stays white?

      Reply
      • Anna Kurowska

        Hi Nina, this is part of the tutorial 🙂 , you have to use that snippet code: .et-fixed-header #top-menu .menu_cta a {
        color: #fff!important; /* change color value */
        }

    10. Shane

      Very nice tutorial on menu cta, as I have already used it on africafoodsafety.com

      Have a look as I also added a border radius

      Reply
      • Anna Kurowska

        Love it!

    11. Christine

      Thank you for this. That .et-fixed-header #top-menu code snippet is not working for me though, the background and text go grey on hover.

      Reply
      • Anna Kurowska

        Hi Christine, please provide URL to your website and I will try to help 🙂

    Submit a Comment

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

    Receive notifications about our new blog posts.