How to create menu CTA buttons

by Divi, Tip0 comments

Recently I have been working on a series of online forms.  I thought that a Call to Action (CTA) button on the main Menu was a good way for visitors to access the forms. After some research, I decided that a simple CSS solution would fit my needs. There are more complex solutions around, but I wanted something that fitted well with the existing menu structure. Other solutions I tried did not perform well responsively.

To create a button, follow these basic steps:

  1. Create a Menu custom link
  2. Give the custom link a CSS class
  3. Write some CSS for the class

For all of my websites, I use the Divi Theme from Elegant Themes. In your theme, you may need to CSS inspect the page to see how your menu is named.  In Divi, it is named  “top-menu”.

STEP 1:

  • Create a custom link to your destination URL in the WordPress > Appearance > Menus.
  • Setup a CSS class and button text in the navigation label box.  eg. <span class=”top_menu_CTA”>Renew Membership</span>  ** The CSS class must be unique. I’ve used a very creative class name of “top_menu_CTA”.
  • Save your work!

Adding a CSS class to a menu custom link

STEP 2:

  • Use my snippet as a starting point or write your own button CSS.
  • Save the CSS snippet into theme.  For Divi sites, I use the Divi Theme Options CSS box or you could also save into your Child theme CSS file.

STEP 3:

  • Start testing to see the result. You will most likely need to adjust the padding to suit your Menu spacing and colour.

That’s all, it is very easy to setup and configure to suit your solution, and, also looks good.

Menu CTA button example