Buy Now! button

BB Theme
1

Hello friends, how can I add a Buy Now! button like the one you are using in your site? Thanks

2

I’m talking about the one in your Navigation Menu, next to Pricing.

3

Hi Alfonso,

You’re going to need to do a bit of custom css styling to get a button like that. It’s not something that is possible with the Beaver Builder theme out of the box.

4

Hi Alfonso,

I had a bit of spare time so came back to help you on this. Here are the instructions on how to get that Button you’re looking for using the Beaver Builder Theme.

  1. Add the following code to the Code section of the Theme Settings and then save settings:

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.nav-cta > a {
background-color: #f7941e;
border: 1px solid #c58323;
color: white;
padding: 5px 14px !important;
text-shadow: -1px 1px rgba(0, 0, 0, 0.3) !important;
box-shadow: inset 0 1px 1px rgba(245, 243, 67, 0.3), inset 0 -1px 0px rgba(132, 90, 23, 0.03);
border-radius: 5px;

  1. Go to Appearance > Menus in your Admin area
  2. Click on “Screen Options” (it’s a tab located at the top right of your screen)
  3. Make sure CSS Classes is checked
  4. While you’re still in the Menus section, click on the menu item that you want to look like a button.
  5. Enter “nav-cta” into the CSS Classes box (without the quotes) for that menu item.
  6. Save Menu

You will now have an nicely styled orange box around that menu item you chose. You’re going to have to play around with the padding values in the css code you pasted in earlier to size it.

Also, if you want to change the colors, just change the “background-color” and “border” color values. Also, the “color: white” is for the text color on the button.

Have fun:)

5

One more thing. If your button is not vertically aligned with the rest of your menu items, add the following line to the css code I provided above:

margin-top: 8px;

You might have to adjust the value to get it aligned perfectly.

6

Hi colcar, thank you for taking the time to help me and the detailed instructions! It works!!

As you said, I’ve been playing with the paddings to align the text it to the other menu elements.

Thanks a lot!

7

You’re very welcome Alfonso:)

Don’t forget to add that margin line. Your code should look something like this:

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.nav-cta > a { background-color: #f7941e; border: 1px solid #c58323; margin-top: 8px; color: white; padding: 5px 14px !important; text-shadow: -1px 1px rgba(0, 0, 0, 0.3) !important; box-shadow: inset 0 1px 1px rgba(245, 243, 67, 0.3), inset 0 -1px 0px rgba(132, 90, 23, 0.03); border-radius: 5px; }

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.nav-cta > a:hover {
background-color: #db8116;
}

That last bit of code will give your button the mouse-over effect.

Cheers,

Colin

8

Hey guys,

I just posted a video with full instructions on how to create the menu button over on my blog:

http://dynamikbeaver.com/blog/add-cta-button-beaver-builder-menu/

I hope you find it useful.

Colin

9

Colin, thanks so much!!!

10

Colin, thank you again, you rock!!!

11

You’re welcome guys:)