How to replace a default Divi Menu
With this snippet, you can add an good effect to the default menu. I’ve also added an fewer effect on the drop down menu to improve the default look of the menu text. How to customize this code: All you have to do is add the snippet to your Divi Custom CSS in Theme Options, […]

With this snippet, you can add an good effect to the default menu. I’ve also added an fewer effect on the drop down menu to improve the default look of the menu text.

How to customize this code: All you have to do is add the snippet to your Divi Custom CSS in Theme Options, and the code will work as it with the default menu. the code works for desktop screen-only. 

@media screen and (min-width: 800px) {


.et_pb_menu li ul 
{
width:270px !important;
position:absolute;
top:90% !important;
left: -20% !important;
-webkit-box-shadow: 5px 5px 38px 5px rgba(0,0,0,0.13); 
box-shadow: 5px 5px 38px 5px rgba(0,0,0,0.13);
border-radius:10px !important; 
border:0px;
}

/*edit the Divi submenu list items*/
.et_pb_menu li li {
white-space:nowrap;

}

/*edit the Divi submenu list items on hover*/
.et_pb_menu li li:hover {
    width:270px !important;
    background:grey;
    
}

/*edit the Divi submenu links*/
.et_pb_menu li li a {
}

/*edit the Divi submenu links on hover*/
.et_pb_menu li li a:hover {

}
nav li li a:before
{
    font-family: 'Font Awesome 5 Free';
    content: '\f111';
    text-align: center;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: -10px;
    color: lightgray;
    font-size: 1em;
    transition: all .3s ease;
}
	
	
}