How to Create a Call To Action Button for the Divi Menu
Now there are numerous ways to do this but in this tutorial, I show you how to do it without the use of an external plugin, without adding an image in the menu or without trying to past the Divi button code in the menu (which can certainly cause issues.) This method is most similar to Geno’s Transform a Divi Menu Item Into a CTA Button method but has slightly different code and this one works on mobile. After all, if there’s a nice call to action button in the menu on desktop, it should be there on mobile too! With just a handful of lines of CSS, we can add a sleek, modern and eye-catching call to action button in the Divi menu. Enjoy and have some fun!
A day after I launched this tutorial, I figured out a way to eliminate the “height” code from above. By editing JUST the .menu-cta a element, we can bypass having to edit the container around the link. So the while the CSS below is very similar to what’s above, it saves you a few lines and just adjusts the link itself. Enjoy!
/*---------------Menu CTA Button---------------*/
#top-menu li a:hover {opacity: 1!important;}
.menu-cta a {
border: 2px solid #ffffff4f!important;
padding: 12px!important;
border-radius: 25px;
text-align: center;
}
.menu-cta a:hover {
background-color: #8dc63f;
color: white!important;
}
.et_header_style_left #et-top-navigation {
padding-top: 16px!important;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 6px!important;
}
/*---------------CTA Button Color on Fixed Navigation---------------*/
#main-header.et-fixed-header .menu-cta a {
color: #fff !important;
}
/*---------------Menu CTA Button Mobile Settings---------------*/
@media only screen and (max-width: 980px) {
.menu-cta a {
background-color: #8dc63f;
}
}
Transform a Divi Menu Item Into a CTA Button
Where to put your Custom CSS in Divi
Similar Tutorials:
Converting a Divi Menu Item into a Call to Action Button – Elegant Themes
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Thanks. I will add this soon. 🙂
Awesome!
Amazing
Josh this is really helpful. Can you post an update showing how you would intergrate adding Font Awesome icons on the menu CTA button? That would be really stellar.
Great tutorial Josh.
Thanks, Drew! Much appreciated man.
Thanks Josh! Works very well
Awesome to hear, Carlos! Glad it worked out for ya.
Thanks for sharing, Josh – very helpful. Everything’s working correctly, but when I scroll down my page and hover over the button, the text and background color are the same, so the text isn’t visible. It works correctly though, before scrolling. What am I missing?
Thanks Shannon. It’s probably an active link color issue or something like that. I revised the code in the post above if you want to try that out and see if it works! Otherwise if you want to post a link I can take a peak.
Worked it out. It was the active link color I was overlooking. Thanks brother.
Awesome. Glad to hear that worked! I actually have a similar issue on my In Transit Studios business site that I have to address. Cheers!
Hi Josh,
So desapointed but it doesn’t work for me 🙁
An idea if you look my page with Inspect Element ?
Maybe it’s because I have other things in my css…
Tks for your help.
Sorry Josh… It’s OK.
Thanks !!!!!!!!!!
Awesome to hear that it worked, Manu!
Hi Josh!
Thank’s for your tutorial! I wanna know… how do I change the text cta color?
Hi Adriano, you can just put color: white; or whatever color you want there! Code provided is in the post for you.
Your code is different in your video and your post.
I’m guessing you’re pointing out the revised code I posted shortly after the tutorial was released. In which case, yes it’s a bit different. I was able to shave off a few lines and made it easier by dropping the “li” fields. The only other thing that’s different is the !important attribute I had to add after some recent Divi updates. Cheers!
HI Josh , Any chance you know of a solution for this using the Divi extra theme ? It seems the padding 12px top drops the menu Item down
I think I solved it by just adding margin-top: -12px!important;
Awesome!
Hi Josh, thanks for the great tutorial! It’s working great for me, except for one instance that I don’t believe you covered in your tutorial.
My CTA button is green (actually the exact same green as in your example, which confused me a bit at first!) and the button text is white. My CTA link is an anchor to the bottom of the front page, but as soon as I scroll while on the front page, the text turns green and is no longer visible because it’s the same color as the button. It remains white whole scrolling on other pages; only an issue while on the front page.
I’ve added color: #ffffff!important; to each section in the CSS which works great for hover, but does nothing for when the page scrolls. What am I missing?
Any insight would be appreciated.
Thanks!!
Hey Steve, can you post a link? Yeah I should’ve covered that. Usually you just have to add the “#top-menu li.current-menu-item > a” class in front then change the color from there.
Sure thing, the site is https://www.homebiotic.com/, as linked from my name.
I haven’t been able to get it to work yet, and I’m reluctant to keep messing with the appearance of a live ecommerce site. 🙂
If you could share the exact code snippet to fix the color, that would be greatly appreciated. I do believe others may find it useful as well. Thanks!!
typo in your code: border: 2px solid #ffffff4f!important;
Hey Sal, are you referring to the color code? That’s the new CSS format for color + opacity. All works on my end.
Hi Josh, thank you for an amazing tutorial! 🙂 It’s simply perfect, but I’m having a small issue here – whenever the code is applied and I just arrive to the page – the button looks good. Once I’m trying to scroll the page down – the background colour+border drops down as well. Wondering what I’m doing wrong?
Can you post a link, Elena? Also see this thread of comments, I think someone addressed a similar issue above!
Hi Josh, Have you got any code that links this button to a pop-up? thanks!
Hey Paulo, I recommend using Divi Overlays! The go to for pop ups in Divi.
thanks so much.. this is really helpful..i had just applied this and it works..
Thanks keep sharing such article..
Awesome. Thanks for the feedback!
Hi Josh, I have a little addition for your code. I needed to change the font color om the fixed menu. This can be achieved by adding the following code:
#main-header.et-fixed-header .menu-cta a {
color: #fff !important;
}
Awesome – thanks, Kevin! I’ve addressed that in the comments here and on youtube but should’ve mentioned it in the tutorial. Will post that code. Thanks!
Hey Josh! This is amazing but the only thing for me, on mobile how can I make the background colour different when it’s not hovered/touched, and likewise when it is hovered and touched.
It’s disappearing on mobile for me: https://mindfulnomadsretreat.com/
Hey Robert, you can change the color in the mobile settings part of the CSS and add :focus to the link to change the color when clicked!
Thank you so much – this feature saved my header 🙂
Whoop whoop! Great to hear, Pia.
The code included appears to only show a “cta button” style upon hovering.
Code for down and hover state is in there!
I’ve added classes to WP menus a million times. For some reason on this particular site I’m working on, the menu item won’t take the class. Any ideas on what could cause it? Just some general things I might need to check because I’m not coming up with any ideas.
Nevermind my previous comment/question. This was a development that got mothballed several months ago and now we’re ready to move forward. I forgot I never designated the primary navigation. LOL Feel dumb. LOL It was my very first Divi site and I used no layout packs. LOL Anyway, it’s cool now. Great tutorial, thanks a bunch.
Glad to hear it worked out, Eunice!
Hi Josh.
How could I make this cta button to trigger a Divi overlay using CSS?
Hey Juan, I recommend using Divi Overlays if you don’t already have it, then you can just link that in the menu CTA!
Thanks Josh.
Really easy bit of code to apply to a site. Thanks Josh.
Awesome – no problemo, Simon!
Hi Josh,
Great tutorial, thanks. Got it all working – but on fixed nav, the white text turns to green.
I’ve seen the code to change the text on the button colour…it’s just on the active link page, the site-wide link colour is overwriting the #fff!importantfrom the custom CSS.
Was struggling to work out how to add the white to the active link on fixed nav…is this possible?
Thanks, Mike.
Hey Michael, I think this has been answered in the comments but at quick glance, you should be able to add this to help with the coloring on the fixed nav setting
#main-header.et-fixed-header .menu-cta a { color: #fff !important; }Then this for the active menu item coloring
Hope that helps! And works 😉
Hi Josh – maybe something has changed since 2018. I am trying to do the same. Everything works great until I reach the active link page that I applied the class to. When I scroll up and the fixed menu appears, the text changes to the grey link color of my other menu items. When I check in the browser inspect tool, it shows that the color I set in the Customizer has an !important next to it.
And wouldn’t
#top-menu li.current-menu-item > a
need to have “.menu-cta a” built into it somewhere? we only want to apply the special color on that particular page.
I appreciate any help…
It just occurred to me that the whole “CTA button in menu” thing could be handled in the Theme Builder. Will try this route.
Thanks anyway for the video and tutorial.
Yeah this is for a menu without using the Theme Builder so you can create a button separately with that!
Awesome tutorial Josh. Got it working no issues. Question for you. Is there a way to have the button only show on scroll when you have a fixed nav bar enabled? So when the page initially shows, it’s just a normal menu link, but when the user scrolls down, then the link becomes the CTA button? Similar to how this site has it. https://conversionlab.no/
Thanks
Yep you could add the effect to the menu only on scroll with .et_fixed_nav #main-header
Josh, I dont understand… ?
With this CSS, how will the CSS know what button i want?
It knows by adding the class to the menu link!
Ole, when inside menu section of WordPress, click more options at top right corner and select CSS CLASS
Hi, I came across your site. I am curious and I need help.
Coz I’m making a site using divi theme, the call to action button should not be inside the menu but rather a floating button inside the menu row to the right . Any tricks how to do this?
mmm not sure off hand. Might take some serious CSS or JQuery depending on where the placement needs to go.
Thank you Josh. Very clear tuto!
Loved the tutorial! Really easy to understand for a beginner. I figured out how to edit a lot of the colors by reading the comments on this article but have been running into trouble trying to get rid of the hover. I would really like to keep the CTA button color, border, etc. without the hover. If you would show me how to do the same exact thing excluding the hover effect that would be wonderful! Thanks again, watch a lot of your stuff. As a business owner, this is very intuitive.
Very helpful tutorial..
Thank you so much
Hey Josh,
Brilliant tutorial and thank you for including the code. One thing I have been trying to do with very little success is making a CTA in the menu that will allow a “click to call” so that visitors on mobile can click the CTA and automatically dial a phone number. This seems fairly close the only issue I am having is that I can only use a custom link which dictates the phone to try and pull up an IP or URL. Any ideas? This has been killing me… Thanks in advance.
Hey Sam – just add tel: to the link then it’ll call when clicked. So something like “tel:444-444-4444”
HI Josh,
This was great! I’m just trying to figure out how to make it so the button isn’t transparent. My site isn’t live yet, but I changed the background color of the button from green to a dark pink – #eb6e80. I also got a pink border around it. It all changes to pink when it is hovered on, but the rest of the time the button color is the pale yellow color of my header. Is there a way to make the button a solid pink the entire time rather than just on hover? Thanks for posting this.
My client wanted a very “thin” button. Once the padding was decreased, the button text was below center. Turned out to be line-height shoving the text to the bottom of the button. Added:
.nav li {
line-height: 0.5em;
}
That took care of it! Sharing in case anyone else runs into that issue :-). I think it only comes up if you’re doing a button with less top/bottom padding.
Awesome tutorial! I do have a question though.
I followed a similar tutorial (https://www.youtube.com/watch?v=66mbzTXsy10) and got my button the work.
I used the Bloom plugin to point all the call to action buttons on the page to the popup. I also want my button in the nav bar to open the popup as well but don’t know how to give it a CSS id and class. Any ideas?
When you’re in the menu area, you can open screen options to make sure CSS link target (or other options) are enabled on the menu items! I show that in the tutorial as well.
Oh you are right. I’m very new to this stuff.
I already had added a CSS Class for the button but it wasn’t similar to my other buttons.
I changed it in the menu and in the additional coding in my Divi theme customizer to match the other buttons on my site that work and added a custom URL of #clicktrigger which I did for my other buttons, but it still doesn’t work.
Do you have a tutorial on this (opening a popup by clicking the button on the Nav bar)?
Your advice is much appreciated.
I sure do! See here! https://joshhall.co/how-to-create-a-divi-popup-using-divi-overlays/
Thank a lot Josh! Joined your fb group as well. Your group is really good.
Great to hear, Khadijah!
Thanks so much for the tutorial, Josh! I’m not the most savvy in CSS but your tutorial was very easy to follow.
That being said, I’m having trouble changing the active link color of the button I created when I scroll down on the page. The active link color and the button color are the same.
I saw a solution in other comments with #top-menu li.current-menu-item > a but that seems to change the active link color for the whole menu. I just want the button changed.
I would appreciate the help!
Can you post the link, Priscilla?
I appreciate all of your tutorials and followed this tut exactly but for some reason the top of my button aligns with the top of the rest of the nav links and I can’t get the button to be vertically centered when adding the padding, it just keeps pushing everything up. I am building my navigation in Divi’s new Theme Builder Global Header, not sure if that has anything to do with it. I’m also not able to change the button text color with that code (also assuming because of the Theme Builder). Thanks for any insight!
Please disregard and delete comments, ultimately I added another column and a regular button.
My button top also aligns with the top of the other menu items, so the button text is lower than all of the other menu links and I can’t seem to get the alignment right.
Hey Josh !
Thanks again for that tutorial.
Saved my a** on this one haha.
Cheers
Hi Josh, many thanks for the tutorial! Your tutorials are so helpful!
I’m facing a challenge of displaying the CTA button on the desktop version, it seems working well on mobile, but no matter what I do, it just doesn’t show on the desktop version. How can I solve this problem?
Thank you so much for your advice in advance!
mmm not sure Jenna. This works on all view ports!
Hi,
Everything works, but no matter what I try, the text of the CTA button doe’s not change. The text remains the same color as the rest of the menu.