Comments on: How to create a call to action button in the menu

By: Cyn

Cyn — Mon, 22 Jul 2019 05:30:03 +0000

In reply to Mark. Hi Benjamin, You are meant to use cta_menu, not cta_button in the Menu custom link CSS area.

By: Lucie Nohynkova

Lucie Nohynkova — Thu, 13 Jun 2019 02:38:19 +0000

Great job! Saved a lot of headache. Thanks 🙂

By: Johannah Sarahmaya Karlsen

Johannah Sarahmaya Karlsen — Tue, 14 May 2019 16:26:39 +0000

WOW, this is so nice – thank you!!
Would it be possible to use the button to activate an optin from bloom as well? Would be very cool 😉

By: Jalapeno Jack

Jalapeno Jack — Fri, 29 Mar 2019 02:51:04 +0000

This is nice and all but the menu items are no longer vertically centered in the navigation m80

By: Mark

Mark — Mon, 03 Dec 2018 09:24:31 +0000

In reply to Benjamin Wulff. Do you have a link for me?

By: Benjamin Wulff

Benjamin Wulff — Sun, 02 Dec 2018 09:01:11 +0000

Cant make it work

1) Created at custom link in my Main menu and the CSS class cta_button
2) Inserted the code:

/* ##### CALL TO ACTION MENU BUTTON ##### */

@media only screen and ( min-width: 981px ) {
.cta_menu a {
background-color: #ef4138;
padding: 15px 25px !important;
border-radius: 25px;
text-transform: uppercase;
color: #fff !important;
box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.1);
}

.et-fixed-header #top-menu .cta_menu a {
color: #fff !important;
}} in custon CSS

But its not colored (changed it to red red to match the top navi

Great Webly theme by the way 😉

By: Mark

Mark — Fri, 30 Nov 2018 08:48:24 +0000

In reply to Sarah.

Hi Sarah,

yes add this line in the CSS .cta_menu a
font-size: 16px !important;

Change the fontsize number with the size you want.

By: Sarah

Sarah — Thu, 29 Nov 2018 15:31:43 +0000

Is there a way to change the font size?

By: Mark

Mark — Sat, 10 Nov 2018 13:04:03 +0000

In reply to Leo. This will probably require some custom CSS

By: Leo

Leo — Fri, 09 Nov 2018 21:30:21 +0000

Hey Mark! Thanks for this!

Any way to place the button on the top left hand side of the secondary menu
and not the right side?

Here’s a screenshot:

https://cl.ly/b2ba900deb77

We placed a graphic at the top left hand side using CSS, but it’s not as good
looking and effective as your method.

Thanks so much!

Sincerely, Leo