How to Duplicate Elegant Theme’s Primary Menu with Divi

The new Elegant Themes menu has been a popular request for developers to duplicate on their own sites. The main feature of the menu is the call to action (CTA) button that grabs the attention of visitors by changing colors and animating when scrolling down the page. Having this kind of CTA button on your site will likely increase click rate and conversions.

Today I’m going to show you how to duplicate Elegant Theme’s primary menu using Divi. To implement the custom style and functionality of the button, I will be using a combination of CSS and jQuery.

Let’s get started!

Implementing the Design

Subscribe To Our Youtube Channel

Creating the Menu

From the WordPress Dashboard, go to Appearance → Menus. At the top of the menus page click Screen Options and check CSS Classes. This will allow you to add a custom CSS class to your menu items.

Now click “create new menu” and give your menu a name.

Click “Create Menu” button.

Next, add the menu links to your new menu. Since we are duplicating the Elegant Themes menu I’m adding the following custom links:

Themes
Plugins
Blog
Contact
Login
Join to Download

Once you are finished adding the links to your menu, select the new menu as the primary menu for your site.

In order to change the “Join to Download” menu link into the CTA button, you will need to add a custom CSS class to it so you can style it later using CSS. To add the class, click the arrow on the right of the Join to Download menu item to reveal the configuration options. Add a class called “jointoday_button” inside the CSS Classes text box.

Save Menu

With the menu created and set as the primary menu, it’s time to add the styling to the navigation menu and CTA button.

Styling the Navigation Menu

First we need to change your primary menu bar text size. Go to Theme Customizer → Header & Navigation → Primary Menu Bar. Keep all of the default settings and change the text size to 15.

The rest of the navigation menu will be styled using custom CSS. Under Theme Customizer, go to Additional CSS and add the following custom CSS (you can also add these to your child theme’s style.css file):

/*** remove shadow on main header***/
#main-header {
box-shadow: none;
}

/*** add shadow to fixed header ***/
@media (min-width: 981px) {
#main-header.et-fixed-header {
    box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -webkit-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -moz-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
}
}
/*** adjust padding on menu ***/
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 23px;
}
#top-menu li {
padding: 0 10px !important;
}

.et_header_style_left #et-top-navigation {
padding-top: 20px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 10px;
}

/*** style the menu button ***/
.jointoday_button a {
color: #f92c8b !important;
    line-height: 9px;
    font-weight: 600;
    padding: 13px 16px !important;
    text-transform: uppercase;
    font-size: 12px !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    display: block;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    border: 2px solid #f92c8b;
}

.jointoday_button a:hover {
    opacity: 1 !important;
    color: #fff !important;
    background-color: #f92c8b;
}

.et-fixed-header #top-menu .jointoday_button a:hover {
    background-color: #de20b3;
    border: 2px solid #de20b3;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

.et-fixed-header #top-menu .jointoday_button a {
    color: #fff !important;
    background-color: #f92c8b;
    box-shadow: 0px 5px 20px #d6dee4;
    -moz-box-shadow: 0px 5px 20px #d6dee4;
    -webkit-box-shadow: 0px 5px 20px #d6dee4;
    border: 2px solid #f92c8b;
}
.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a {
    background-color: #2cc2e6;
    border: 2px solid #2cc2e6;
    animation: highlight-nav .8s ease;
    -webkit-animation: highlight-nav .8s ease;
}

#main-header.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a:hover {
    background-color: #f92c8b;
    border: 2px solid #f92c8b;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

@-webkit-keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

/*** style the mobile menu links and button ***/
@media (max-width: 980px) {
.et_mobile_menu li {
text-align: center;
}

.et_mobile_menu li a {
border-bottom: none;
}
.et_mobile_menu li a:hover {
background-color: transparent;} 

.jointoday_button a {
border-bottom: 2px solid #f92c8b !important;
}
}

You are almost done. Let’s check out what the menu looks like so far.

Notice the shadow under the menu has been removed and only shows when the fixed navigation is activated when scrolling down the page. Also, the CTA button has been styled to change colors on fixed navigation.

Adding the jQuery

All that is left to do is add the additional color change and pulse animation to the button when scrolling down to a certain point on the page. This additional functionality draws further attention to the CTA button as the user engages with content. In order to add this effect, we need to add an additional CSS class to the button only when the user scrolls to a specific point on the page. In this case, we will be adding the class “et_highlight_nav” to the menu when the user scrolls to a point greater than 50 percent of the body of the page. This class will be removed once the user scrolls back to the top of the page.

You can accomplish this by adding some jQuery. Go to Divi → Theme Options, and under the Integration tab, add the following jQuery to the “Add code to the head of your blog” text area:

<script>
jQuery(document).ready(function($){
	jQuery(window).scroll(function() {    
	var   $main_header = jQuery('#main-header'),
		$body = jQuery('body'),
                scrollPercentage = 100 * (jQuery(this).scrollTop() / $body.height()),
                scroll = $(window).scrollTop(),
	    	objectPosition = $body.offset().top;

	    if (scroll < objectPosition) {
	        $main_header.removeClass("et_highlight_nav");
	    }
	    if (scrollPercentage >= 50){
	        $main_header.addClass("et_highlight_nav");
	    }
	});
});
</script>

The class “et_highlight_nav” can now be used to style the CTA button with a pulse animation and a blue color. Since you already added the custom CSS for this effect earlier, you are all set.

Check out the menu now.

The CTA button will now turn blue and pulse as you scroll further down the page and reset when you go back to the top of the page.

Changing the Color of your CTA button

Since the CTA button is using a custom CSS class, you can change the button’s style to match your site by adjusting the CSS you added earlier. Simply replace the color code with your own. Here are the sections of CSS that target the different button styles:

If you change the color of your button, make sure to change the bottom border of your button on mobile by changing the CSS here:

How Does It Look on Mobile?

The custom CSS added earlier will center your menu items and properly space your CTA button on mobile just like on the elegant themes mobile menu.

The Menu Font

For this tutorial, I’m using the default font Open Sans as the menu font. The default font for the Elegant Themes site (including the menu text) is a font called Poppins. You can import this font using Google Fonts by following the instructions on this previous post.

Final Thoughts

That’s it! You have successfully duplicated the Elegant Themes primary menu. And, you can adjust the style of your CTA button to match the design of your site by adjusting the custom CSS. Since the button colors change on the fixed navigation and animate when scrolling down the page, users are more likely to notice the CTA which will help your conversions.

I hope this new menu will be a useful feature for upcoming projects. And I look forward to hearing from you in the comments below.

Enjoy!