Taking too long? Close loading screen.

NEW

Build A Custom Divi Menu

We discuss how to custom code a unique menu using the Divi WordPress Theme. Follow along and you will have a unique menu in minutes.

How To Use Divi Layout Packs

So you’ve downloaded a shiny new layout pack… now what? Today we will take you through the process of settings up a Divi Layout Pack

Mastering The Divi Import / Export Tool

Divi is an incredibly versatile theme platform to use when developing a wordpress website. Today we are going to cover how to use the import/export functionality Elegant Themes has built into nearly every section of Divi. Portability and ease...

search results.

""

Build A Custom Divi Menu

As of today, building a custom Divi menu takes more skill than simply dragging things objects in to place. See the Elegant Themes sneak peak of their upcoming theme builder here. As of today, we will still have to add a little CSS to create a custom divi menu.

In today’s tutorial, we show you how to recreate the custom Divi menu used on our layouts preview site. We will give you the code to drop into Divi Theme Options and walk you through where to place this code. From there we will show you how it all comes together.

You will find a free download of the Divi Theme options .json file below. This will allow you to import the code directly into Divi Theme Options. If you aren’t sure how to use the .json file, learn how to master the Divi import/export tool.

Let’s Get Started

Copy the code below into Divi -> Theme Options -> Custom CSS

CSS CODE


#top-header, #top-header #et-info, #top-header .container, #top-header .et-social-icon a {
    line-height: .5em;
}

#top-header .container {
    padding-top: .125em;
    font-weight: 600;
    padding-bottom: .25em;
}

#et-secondary-nav, #et-secondary-nav li a{
    padding-top:5px;
}

#et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after {
    margin-top: 5px;
}

#top-menu .menu-item-has-children>a:first-child:after,.menu-item-has-children>a:first-child:after{
	margin-top:0px;
}

/* Secondary Navigation Drop Down Menu */
#et-secondary-nav .sub-menu{
	background-color:#ffffff; /* CHANGE BACKGROUND COLOR */
	max-height: 75vh;
	width:300px;
	overflow-y: auto;
	overflow-x: hidden;
}

#et-secondary-nav li ul{
	border-top:0px solid #333333; /* CHANGE NAVIGATION LINK COLOR */
	box-shadow: 0px 5px 20px rgba(0,0,0,.2);
}

#et-secondary-nav li ul a {
    padding-top: 10px;
    padding-bottom: 10px;
	margin-bottom:5px;
	text-transform:uppercase;
	font-size:14px;
}

#et-secondary-nav li li a {
	float:left;
	width:250px;
	padding: 6px 20px;
	color:#333333;
}

#et-secondary-nav li li a:hover{
	background-color:rgba(255,255,255,0);
    color:#000000; /* CHANGE NAVIGATION LINK HOVER COLOR */
}

#et-secondary-nav li li a:hover:before{
	content:"Demo / "; /* CHANGE THE HOVER TEXT BEFORE SECONDARY MENU LINKS */
	font-weight:900;
}

/* Start of Primary Menu Bar Mods */

#main-header .nav li ul {
	margin-left:-100px;
	max-height: 400px;
	width:300px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-bottom: 15px;
	border-top:2px solid #333333;
	box-shadow: 0px 5px 20px rgba(0,0,0,.2)
}

#main-header .nav li ul a {
    padding-top: 0px;
    margin-bottom: 5px;
}

#top-menu li li a {
	  width:300px;
      padding: 6px 10px;
}

#top-menu li li a:hover{
	background-color:rgba(255,255,255,0); /* CHANGE MAIN MENU DROP DOWN BACKGROUND COLOR */
    color:#000000; /* CHANGE MAIN MENU DROP DOWN MENU LINK COLOR */
}

#top-menu li li a:hover:after{
	content:" Client"; /* Change this content to adjust link hover words */
	font-weight:900;
}

/** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
	text-transform:uppercase;
	 margin-left: -30px;
	 padding: 5%;
	 width: calc( 100% + 60px);
	 box-shadow: 0px 10px 20px rgba(0,0,0,.3)
}

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d";
 color:#333333;
}

.et-search-form, .nav li ul, .et_mobile_menu, .footer-widget li:before, .et_pb_pricing li:before, blockquote {
    border-color: #000000;
}


.et_mobile_menu ul li{
	padding-left:0px;
}

.et_mobile_menu ul li a{
	color: #333333;
	border:0px;
}

.et_mobile_menu ul li a:hover{
		background-color:rgba(255,255,255,0);
    color:#333333;
	opacity:1;
}

.et_mobile_menu ul li a:before{
	font-weight:900;
	content:"- ";
}

.et_mobile_menu ul li a:hover:after{
	font-weight:900;
	content:" / Demo";
}

#mobile_menu .menu-item-has-children {
    position: relative;
}

.et_mobile_menu .menu-item-has-children>a {
	background-color:#333333;
	color:#ffffff;
}

.et_mobile_menu .menu-item-has-children>a:hover {
	background-color:#333333;
	color:#ffffff;
	opacity:1;
}

#main-header .et_mobile_menu li ul.hide {
    display: none !important;
}

#mobile_menu .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
}

span.menu-closed:before {
    content: "\4c";
    display: block;
	background-color:#fff;
    color: #000;
	margin-top:-2px;
	padding:2px 5px 2px 5px;
    font-size: 16px;
    font-family: ETmodules;
}

span.menu-closed.menu-open:before {
    content: "\4d";
}

/* Secondary Menu Link With Right Border */
.sec-menu-link-separator a{
	padding-right:20px;
	border-right:1px solid #ffffff;
}

Previous