Put a Call to Action Button in your Menu!

How to put a Call-to-Action button in your Menu

Here’s a nifty trick that I like to use for certain clients who have a very clear “call to action.” Give it some pop by styling it as a button! It will appear on every page, and work wonders!

1. Add the link your WordPress menu as a regular menu item. In this case, it was the exact same page as “Contact Us!” I just changed the text.

2. Go back to view your home page, right click on the menu item and choose Inspect Element. This will show you the CSS element. In my case the element is “menu-item-202”

Home page with code exposed

3. Style that one element using css. Go to Appearance > Customize > Additional CSS to enter the code. Here was mine, below. Notice I used the “menu-item-202” element – yours will be different, and that’s why Step #2 is important!

li.menu-item-202 a { background: #8e0607; color:#FFF !important; border-radius:15px; } 
li.menu-item-202 a:hover { background: #ccc !important; color:#000!important; border-radius:15px; }


Background is a hex code for the background color of the button. Color is the text color. Border-radius is how rounded you want the button to be.

That’s it! You will also want to check it on mobile to make sure the background color and hover background colors work for that menu, as well.

Call to Action button now pops in menu


Another example from an entertainment site:

One navigation item has background color

Similar Posts