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 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;
}

Last Post

Next Post

4 Comments

  1. miro jovanovic

    Hi, is there a way to achieve, that in first row we place logo – on the left, and on the right, in two columns phone number and addresses, and in the second row our main menu.

    Thanks for the video, it looks very professional.

    Reply
    • klm

      Hey Miro! Thanks for the comment! I’m not sure I fully understand what you are trying to achieve on your menu.

      Are you saying in the logo be in the center of the blue top menu with the phone number on the left of the menu and the address on the right. Then have the main menu split into two columns?

      Sorry I don’t fully understand, but am happy to try and help you reach the menu you are trying to create.

      Reply
      • miro jovanovic

        Like i want to achieve to have to menu bars, one in his own row.
        In first row i would like to have 4 columns, and put logo and some other things over here, and
        below that,
        second row, with actual main menu bar with menu items.

        Hopefully I was litlle bit more clear :()

        Reply
        • klm

          hey Miro, you can achieve that in a few different ways. Their are a couple plugins you can use.
          1. Page Builder Everywhere – https://aspengrovestudios.com/product/page-builder-everywhere/
          2. Mhmm – https://besuperfly.com/product/mhmm-mighty-header-and-menu-maker/

          Both of these would allow you to design the layout you want in the visual builder, then save it to the Divi Library and finally inject it into your design above your page content. This would allow you to get the results you are looking for with the customization you want.

          I do know that Elegant Themes has been working on the Theme Builder since earlier in 2018. I don’t know when it will officially launch, but i’d assume it will be coming out sooner than later. The theme builder should give you the same abilities without having to purchase an additional plugin. The perk of the plugins is that they are available and work as of today.

          I hope that helps!

          Reply

Submit a Comment

Your email address will not be published. Required fields are marked *