Comments on: How to Add a Call to Action (CTA) Button to the Divi Menu

By: jessemichael2023

jessemichael2023 — Mon, 06 Nov 2023 08:14:57 +0000

In reply to jessemichael2023. Disregard, it wasn't your button code, it was a code for showing the button in the mobile heading bar.

By: jessemichael2023

jessemichael2023 — Sun, 05 Nov 2023 17:27:25 +0000

My button looks perfectly fine on iPhone mobile, but on Android phones the button covers part of the logo.

Website: Staging2.keresafortexas.com

By: Divi Engine

Divi Engine — Thu, 07 Sep 2023 10:35:54 +0000

In reply to Jan. Sorry for the delay.. I see no button on the site, do you need help with this still?

By: Divi Engine

Divi Engine — Thu, 07 Sep 2023 10:34:51 +0000

In reply to Brett.

Sorry for the delay here – missed the comment.

Probably too late, but if you send me a link to the site i could check it and let you know the CSS to use

By: Divi Engine

Divi Engine — Thu, 07 Sep 2023 10:34:15 +0000

In reply to David Escobar.

So sorry for the delay, missed this comment 😀

The way you would do it on mobile would be in the theme customiser I am afraid – or are you wanting the button in the menu that opens?

By: Divi Engine

Divi Engine — Thu, 07 Sep 2023 10:33:25 +0000

In reply to Dan Mossop. Thanks, Dan. Awesome comment and appreciate the code for others to use

By: Dan Mossop

Dan Mossop — Sat, 02 Sep 2023 03:00:12 +0000

Thanks for sharing this 🙂

One minor tweak… if the button text is long enough to wrap onto a second line on mobile, the default line height (9px) is too low – the lines overlap each other. I fixed it with this:

#mobile_menu .de-menu-cta a {
line-height: 1.3em !important;
padding-top: 9px !important;
padding-bottom: 9px !important;
}

It increases the space between the lines, but reduces the top / bottom padding to avoid an increase in the space above and below the text.

Cheers!

By: Jan

Jan — Thu, 26 Jan 2023 12:08:54 +0000

In reply to Brandon Davis.

I have the same issue, did you fix it? The top of the colored button is aligned with the top of the other menu items. We need the top of the button TEXT to be aligned with the top of the other menu items. See https://stilltinnitus.com

By: Dorthe

Dorthe — Wed, 02 Nov 2022 21:55:50 +0000

In reply to Rashel.

Hi Rashel

I ran into the same problem 🙁 – and I have solved it 🙂

If you set an CSS ID to your menu modul (advance tab) eg “menu-cta” then you can add that ID to your css code like this:

#menu-cta .menu-cta-button a {

background-color: #008491; /* Change button background color here */
color: #fff !important; /* Change button text color here */
}

And the rest of the css code of course 🙂

By: Dorthe

Dorthe — Wed, 02 Nov 2022 21:54:51 +0000

In reply to Shanne.

Hi Shanne

I ran into the same problem 🙁 – and I have solved it 🙂

If you set an CSS ID to your menu modul (advance tab) eg “menu-cta” then you can add that ID to your css code like this:

#menu-cta .menu-cta-button a {

background-color: #008491; /* Change button background color here */
color: #fff !important; /* Change button text color here */
}

And the rest of the css code of course 🙂

By: David Escobar

David Escobar — Sat, 08 Oct 2022 19:30:38 +0000

Great tutorial. How can I get the button to display on mobile?

By: Brett

Brett — Thu, 28 Jul 2022 19:09:05 +0000

Even though you have !Important next to the color it does not seem to change the font color using this CSS code.

By: Brandon Davis

Brandon Davis — Thu, 31 Mar 2022 21:54:40 +0000

Hi there. Thanks for the tutorial. My button sits on the bottom of the header and I have tried changing the menu padding to no avail. https://aname.tech Can you please show me where to change the padding to get the button go up some so it’s centered vertically?

By: Brandon Davis

Brandon Davis — Thu, 31 Mar 2022 21:54:14 +0000

By: Daniel Claxton

Daniel Claxton — Sat, 05 Mar 2022 20:41:53 +0000

How would you change the background color when the link is active? I’m really stuck trying to find the correct CSS!

By: Shanne

Shanne — Wed, 12 Jan 2022 03:40:15 +0000

I ran into the same issue where the text keeps it’s color based on the original menu. This seems to be the case across several tutorials.

By: Rashel

Rashel — Tue, 21 Dec 2021 15:38:15 +0000

Hi, thanks for this tuto, it’s great! Unfortunatly, the texte keeps his colors (on my case dark, and green when we are on the page) and it could be nicer in white. I don’t anderstand why it doesn’t want to turn white, it’s white with an important on your code … Strange …