Would you like to highlight some element of your navigation menu with Divi?
The idea is to highlight one of the elements of your navigation menu to turn it into a button that attracts attention, that calls to action.
Add some additional CSS
The first step is to create the CSS code that will do the magic. To do this, as always, we will go to the Additional CSS section of the WordPress customizer, that is, in:
- Appearance → Customize → Additional CSS.
Once there add the following CSS:
/* Divi normal CTA menu */
@media (min-width: 980px) {
.ctamenu {
padding: 0!important;
border-radius: 30px; /* change button border radius */
border: solid 2px #1f769d; /* change button border color */
transition: 0.3s;
background-color: #1f769d; /* change button color */
}
.ctamenu a{
color: #f4f4f4!important; /* change button text color */
padding: 10px 15px 10px 15px!important; /* change button padding */
}
/* Divi menu with CTA hover */
#top-menu-nav .ctamenu a:hover {
opacity: 1;
}
.ctamenu:hover {
border: solid 2px #fe8400; /* change hover border color */
background: #fe8400; /* change hover button color */
}
}Code language: CSS (css)As indicated in the code comments, you can change the appearance to your liking (colors, spacing, button appearance, etc.). Play a bit with the values when you have done the next step…
Adds the CSS identifier to the menu
Once we have created the CSS we have to decide to which element of our menu we are going to apply it.
Without leaving the WordPress customizer go to the menus section and, first of all, make sure that the box in which to add CSS classes will be visible.
This is done in the gear icon in the menus section of the customizer, checking the “CSS Classes” option.
Then edit your navigation menu and open the element you want to customize, adding in the “CSS Classes” box the one we created in the code, which is ctamenu, as in the following screenshot:
When you save the changes you will have a menu in Divi in which there will be one of its elements highlighted, converted into a nice menu that changes color when you hover the cursor, but above all that will serve as a CTA, to attract clicks and take your visitors where you want to direct them.
