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

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.

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 buttons module from PowerPack add-on for Beaver Builder.

7 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 🙂

Leave a Comment





39 Shares
Tweet
Share39
+1