How To Create A Custom Divi Menu Item
One of the most important elements to the success of any website is a prominent call to action button. One of the easiest ways to to this is to create a button on the main menu that is different than the others and stands out.
In this video we are showing you how we created the call-to-action button at the top of this page. If you’re using the Divi theme like we are, it is incredibly easy to add the custom css and apply it to a menu item.
Here is the CSS Code we used for our button
.call-to-action a {
color: #222 !important;
background-color: #FAD04A;
text-align: center;
padding: 17px !important;
border-radius: 30px;
}
/*** THIS CODE WAS ADDED TO FIX THE MOBILE MENU VIEW ***/
.call-to-action-secondary a {
color: #222 !important;
background-color: #FAD04A;
text-align: center;
padding: 17px !important;
border-radius: 30px;
}
If you’re interested in the Divi theme, here is a link to it:
*This is an affiliate link, so I may earn a small commission if you purchase Divi through this link:
As always, thanks for reading/watching this. Be sure to let me know if there is anything you would like to learn about WordPress, Marketing, Divi, or anything else. Be sure to check out my Tools and Resources for some of the software, products and books I recommend.
Thank you for your help! One question: Let’s say you want to keep the ” GET STARTED ” in black, but want to change the last letter (D) to white. What would you do? I have a similar problem, but can’t find a way to solve it.
That is a great question, and here is the best solution I have come up with. When you define the Text in the menu, you would leave off the last letter. So in this case, we would Type “GET STARTE”.
Then you would add the following CSS within Divi >> Theme Options >> Custom CSS and changed the color to whatever color or hex code you would like. The downside of this is that since you’re defining the last letter in CSS, you would have to use the css selector knowing that it is going to add a “D” to the end of everything tagged with the “call-to-action” css class.
.call-to-action a::after{
content:"D";
color:green;
}
Hope this helps you out.
Your solution worked! Question: the copy changes from white (my color choice) to gray when scrolling down. Suggestions to keep it white when scrolling down?
Second question: How do I code for mobile as the desktop version results in a mobile version that is out of whack.