Creating a personalized menu involves few steps and is quite simple, you’ll need a bit of CSS but nothing difficult. Let’s start!

Create a menu

Enter the options Menu in Appearance, from your Dashboard. Select the pages you want to add to the menu and click Add to menu. The next thing you should do is set the menu as a primary and the new pages will be automatically updated to that menu.

Adjust the screen options by clicking on the tab and selecting the CSS class checkbox. Assign a class to the specific item that you want to convert into a CTA and save the changes.

Customize with CSS

Before starting to apply CSS it’s important that you use a child theme or child theme (to be able to return to the starting point if there is any failure).

If you decided not to use a child theme, go to Appearance, then Divi Theme Options. Once there, enter ePanel, scrolls to the end and enters custom CSS.

We’ll show you two popular code options. The first you will see below is extracted from the GenoQuiroz website. Includes the settings for the mobile version of the web.

 /*------------------------------------------------*/
/*-----------------[CTA Menu Item]----------------*/
/*-----------------[by GenoQuiroz]----------------*/
/*------------------------------------------------*/

/* style the get started cta button */
.get-started {border-radius: 0px;}
.get-started a {color: #fff!important;}
li.get-started {
background-color:#ed7818;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding: 12px 13px 10px 10px!important;
border-radius: 3px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;}
li.get-started:hover {background-color:#c96310;}

/* fixed header button text color */
.et-fixed-header #top-menu .get-started a {
color: #fff!important;}
.get-started li.current-menu-ancestor > a, .get-started li.current-menu-item > a {
color: #fff !important;}

@media only screen and (min-width : 981px) {
li.get-started {height: 33px;}}

Inspired by the previous code, Josh Hall also developed a slightly different code but that fulfills the same function.

 /*---------------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;

    }

}

What to do if the color changes when scrolling?

It may happen that the color of the active link changes (if you have customized it) when you scroll. This happens when you have a custom color configured in the fixed menu settings. In that case, it’s better to leave the custom color option blank.

If you must adjust the color of the active link anyway, use this code created by Kathy Kroll. You must enter the CSS in the Custom settings of the Fixed Navigation Bar. Replace the xxxx with the identifier of the menu you wish to modify (find it by right-clicking on the menu item and selecting the option Inspect item in your browser). This code works if you don’t use a drop-down menu. If you use one, go to the next step.

  .et-fixed-header #top-menu li.menu-item-xxxx > a {
    color: #ffffff !important;}  

If you use a drop-down menu in your CTA

If your CTA button has a drop-down menu (especially in mobile), this additional CSS option will suit you. Replace the values of the colors and fonts to match your design.

 /* ADD THIS ONLY IF YOUR CTA BUTTON HAS A DROP DOWN MENU */

/* style the get started cta button drop down menu */

    li.get-started li a {

        color: #666!important;

        width: 160px;

        text-transform: none;

        font-weight: normal;

        background-color:#fff;}

/* mobile menu adjustments */

    .et_mobile_menu li a {padding: 10px 5%; line-height: normal;}

    .et_mobile_menu li.get-started {

        background-color: #fff;

        padding-left: 0px;

        text-align: left;}

    .et_mobile_menu li.get-started a{

        color: #f00!important; font-weight: 900;} 

How to add CSS directly in the Divi style sheet

Adding the CSS directly in the Divi style sheet can be an advantage over adding it from the theme options: the visual builder or the advanced options of each module, since in these options the styles are not identified by colors and this detail helps to be guided much better. In addition, it’s useful to add CSS from the style sheet if you want to apply general changes and not in each of the options, saving time.

To open your Divi style sheet it’s necessary that you have access to your page via FTP. Enter your files and click on the wp-content folder. Then enter the themes folder and you’ll see the Divi folders and, if applicable, the folder of the Divi child theme. Enter the theme folder you have active and you’ll see the file style.css.

Note: You’ll need a text editor such as Notepad or Atom.

Right click on the style.css file and select open with the editor you have selected for this function. There you’ll see the code of your website and you will be able to edit it according to your needs. If you want to edit a specific element, right click on it from your web page, click on Inspect element and locate in which line of code it is. With this information, you can easily locate it in the stylesheet of your theme.

Final recommendations

Remember that you can always vary the function of the CTA button according to the objectives of your website at that moment.

Create a landing page to which that Call to action directed to a special product or service if you’re offering something like that. Design it in a way that doesn’t offer more distractions and the user will notice the call to action to increase the conversion possibilities.

Make the CTA button and its hover have eye-catching colors and really accurate text.

Perform A / B tests with the Divi builder and make a focus group in order to get feedback from your users.

Always try the button from different browsers and devices to make sure it works everywhere.

Are you ready to get more conversions? Tell us how you were adding this Call to action in your Divi menu!