Escolha uma Página

Por padrão, o menu do Divi no celular abre para baixo; Para fazer com que ele deslize da direita para a esquerda adicione o código a seguir no CSS principal.

#main-header .et_mobile_menu li ul.sub-menu.hide {
  display: none !important;
  visibility: hidden !important;
  transition: all 1.5s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible {
  display: block !important;
  visibility: visible !important;
}
.et_mobile_menu .menu-item-has-children > a {
  background-color: transparent!important;
}
.et_mobile_menu .menu-item-has-children > ul > li a{
  background-color: rgba(255,255,255,0.03)!important;
  width: 91%!important;
  margin:5px;
  padding:0!important;
  border-bottom: 0px solid;
  color:#fff;
  border-radius:8px;
}
.et_mobile_menu .menu-item-has-children > a:after {
  content: ' ↓'!important;
  color:#ffd400;
  }
.et_mobile_menu, .et_mobile_menu .menu-item-has-children > a {text-transform: uppercase;
  font-weight:400;
}
.et_mobile_menu .menu-item-has-children > ul > li{
  text-transform: lowercase;
  font-weight:400!important;
}
.et_mobile_menu .menu-item-has-children > ul > li a:before {content: '• ';
  color:#fff;
   }
#main-header #mobile_menu.et_mobile_menu li a {
padding-left: 20px!important;
padding-right: 20px;
}
.mobile_menu_bar{z-index:9999}
.et_mobile_menu li a {
color: #ffd400;
width: 100%!important;
text-align: left;
border-top: 1px solid #525252!important;
  border-bottom: 0px!important;
margin-top: 0px;

}
@media only screen and (max-width: 980px){
#mobile_menu {
display: block !important;
min-height: 100vh;
height: 100%;
top: 0;
right: 0;
position: fixed;
z-index: 9998;
overflow: scroll;
border-top: none;
padding-top: 60px !important;
}
.mobile_nav.closed #mobile_menu {
background:rgba(0,0,0,0.8)!important;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
}
.mobile_nav.opened #mobile_menu {
background:rgba(0,0,0,0.8)!important;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
}
/*largura 1*/
@media only screen and (min-width: 481px) {
#mobile_menu {
width:320px;
margin-left: calc(100% - 320px)
}
}
/*largura 2*/
@media only screen and (max-width: 480px) {
#mobile_menu {
width:260px;
margin-left: calc(100% - 260px)
}
}
/*largura 3*/
@media only screen and (max-width: 340px) {
#mobile_menu {
width:100%;
margin-left: 0
}
}