Build A Custom Divi Menu

September 15, 2018

Build A Custom Divi Menu

September 15, 2018

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 build a custom menu that stands out from the basic Divi menu. 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;
}

Keegan Lanier Media

We are dedicated to saving you time and money with our simple monthly maintenance plans.

You could hire a team to build and maintain your website. This would cost you a minimum of 100k per year in salaries if you had two team members.

Our team is here and ready to design, develop and maintain your website.

Join our growing list of clients who have put their trust in KLM. They are able to focus on their business while we keep their websites working for them.

Website Maintenance

We are dedicated to saving you time and money with our simple monthly maintenance plans.

Website Development

Hire us for much less than the cost of a dedicated team member. We will host, design, develop and update your website.

Tutorials

Education is a key to life. We want to share our experience and knowledge with other agencies, DIY web developers and most importantly with our clients.

An educated client is a confident client. A confident client is a happy client.

Latest Tutorial

Stay In Touch

We've created a quick reference PDF guide to help you get your website going. This free PDF and loads of tutorials will go straight to your inbox when you sign up below.