Join the team. We are hiring!

Add a Call-to-Action Button to your Header Menu

Note: Premium Add-On users can now add the Call to Action Button to their website from within the WordPress customizer. More Details

Having a Call-to-Action button in your menu is a great thing. It grabs the attention of your visitors and points out the most important page on your website.

In this quick tutorial I’m going to show you how to easily create a call-to-action (cta) button in the your website with the Page Builder Framework.

At first, we assign a unique CSS class to the menu item we want to appear as our cta. To do that, navigate to Appearance -> Menu and paste wpbf-menu-button into the CSS Classes (optional) field.

If you can’t see the CSS Classes field by default, open the Screen Options tab on the upper right in your WordPress admin. From here you can activate CSS Classes under Show advanced menu properties.

Now we want to apply a few lines of CSS to that menu item. Paste the code snippet below into your child themes style.css or the Additional CSS field in the WordPress Customizer:

.wpbf-menu > .wpbf-menu-button a {
	background: #005fa3;
	color: #fff !important;
	border-radius: 4px;
	padding-right: 20px !important;
	padding-left: 20px !important;
}

.wpbf-menu > .wpbf-menu-button a:hover {
	background: #007cd6;
}

Sticky Navigation

If you are working with a sticky navigation, you want to make sure that the font color of the button doesn’t change with it:

.wpbf-navigation-active .wpbf-menu > .wpbf-menu-button a {
	color: #fff !important;
}

Otherwise, if you prefer to have a different look for your call to action button on the sticky navigation, you ignore the code snippet right above and use this instead:

.wpbf-navigation-active .wpbf-menu > .wpbf-menu-button a {
	background: red;
	color: #fff !important;
	border-radius: 4px;
}

.wpbf-navigation-active .wpbf-menu > .wpbf-menu-button a:hover {
	background: tomato;
}

And that’s it! Call to Action buttons don’t only look great, they grab the visitors attention and can increase your conversion rate.

Remove Navigation Hover Effect

If you’re making use of the navigation hover effects available in the Page Builder Framework Premium Add-on, you may want to remove it from your button by using this piece of code:

.wpbf-menu-button a:after {
	display:none !important;
}

Tired of the WordPress Dashboard?

Customize the WordPress dashboard & give it a more meaningful use for your clients.

Create a custom WordPress dashboard today!

About the Author

Page Builder Framework

A modern, fast & minimalistic theme designed for the new WordPress Era.

Sign up for the Newsletter

Get notified about the latest updates and feature releases.

We take your privacy seriously! No spam, we promise. See our Privacy Policy
Community
Scroll to Top

Black Friday Sale

Enter your email address and be the first to get notified when our Black Friday sale begins!

Download

Enter your email address and be the first to get informed about new features & updates!

Download

Enter your email address and be the first to get informed about new features & updates!