How to Create Call to Action Button in Header Menu – Beaver Builder Theme

Last updated November 22, 2023 · Puneet

Call to Action or CTA buttons are very important to boost conversions on your website. Because of the same reason, our Beaver Builder Templates have many prominent Call to Action blocks and forms.

Adding a call to action button in header navigation is a common practice. A lot of websites, including our own site use the same.

beaver-addons-header
beaver-builder-cta

To create a CTA button like this one, you will need to add a custom class to menu items.

Go to WP admin > Appearance > Menus and click the “Screen Options” button in top right. This will open up a panel to control various elements. Enable CSS Classes, if that’s not already enabled. 

menu-screen-options

Enabling the CSS Classes option displays a new CSS Class field for Menu items as shown in the screenshot below.

header-cta-css

I have added a custom CSS Class – header-menu-cta so that I can use the same to style the link differently.

Here’s the code that you can use to highlight this link and make it look like a call to action button.

Note: This CSS code works for BB theme menu (not Beaver Builder menu or PowerPack menu)

For PowerPack menu, please use this CSS:

.pp-advanced-menu .pp-menu-nav ul.menu > li.header-menu-cta > a {
    color: #fff;
    background: #2d94e3;
    border: 1px solid #2d94e3;
    border-radius: 5px;
}

/* Hover button styling */
.pp-advanced-menu .pp-menu-nav ul.menu > li.header-menu-cta > a:hover {
  background: transparent;
  border: 1px solid #2d94e3;
  color: #2d94e3;
}

You can create also buttons very easily with Beaver Builder on your page. If you would like to have more control over the styling, you can try smart button module from PowerPack add-on for Beaver Builder.

A few more interesting posts →

14 Comments

  1. Geoffrey Gordon on September 14, 2016 at 7:35 pm

    Awesome code Puneet. looks great.

    Tried it on a current website i just completed. How do i disable the current styling on the menu for new cta link ?

    http://www.gvrcoatings.co.za/

    • Puneet on October 9, 2016 at 1:30 pm

      Hi Geoffrey,

      You can use the following CSS
      .fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.header-menu-cta.current-menu-item > a{ color: #fff; }
      ul.navbar-nav li.header-menu-cta.current-menu-item { border: none !important; }

  2. Naomi on September 18, 2016 at 3:48 am

    a useful snippet of css. thanks!

  3. Alex on December 23, 2016 at 12:12 am

    Awesome. Works great.
    Thank you.

    • Puneet on January 6, 2017 at 9:05 pm

      Thanks Alex! 🙂

  4. Jay @ on March 27, 2017 at 12:58 pm

    Using Generatepress. Can I do the same? I don’t see the styling.

    • Puneet on March 28, 2017 at 11:23 am

      Hi Jay,
      GeneratePress will have different CSS classes to target. This one is only for BB Theme. I will write the same for GeneratePress as well 🙂

  5. Tone on June 12, 2017 at 4:14 pm

    Where do I save this CSS file or where should I paste that code in? I don’t see that in this guide.

  6. Jürgen on June 20, 2017 at 8:00 pm

    How do you maintain the button’s position when the header menu is collapsed on scrolling down. I’m having it move, unlike how it is on this website. Thanksl

    • Puneet on June 25, 2017 at 10:58 pm

      Hi Jurgen,
      We are using Sticky header option from BB Theme.

  7. Haley on July 31, 2017 at 10:26 pm

    Hi there,

    How do you make it so the call to action button when clicked brings up a pop up subscription that sits overtop of the homepage rather than taking you to a complete page?

  8. Cameron on November 25, 2017 at 6:18 am

    Hi,
    this is a great tutorial and I have used it on a few websites. Thank you 🙂
    I have an issue in that when the website menu adapts for mobile the CTA button, changes colours.
    For the life of me I can´t figure out how or where to adjust these..
    I am trying to get it appearing with the same colours as on the desktop version of the site.
    Background Orange Hover becomes Grey
    With constantly white text.
    Many thanks in advance for any suggestions

  9. Jason Teji on February 18, 2020 at 7:29 am

    This is a very useful bit of CSS! Thanks!

Leave a Comment





PowerPack Beaver Addons

Start creating beautiful websites with 65+ modules and 350+ templates for Beaver Builder.

Join 12000+ Subscribers.

Get the latest Beaver Builder Tips and Updates in your Inbox. 

Please enter your name.
Please enter a valid email address.
Something went wrong. Please check your entries and try again.