Uno de los estilos de menú más populares del tema Divi es el deslizante, pues en ordenadores de sobremesa imita un menú móvil pero mostrando el menú como deslizándose desde la parte derecha de la pantalla, igual que hacen los ajustes y extensiones de sistemas operativos como el de Apple o navegadores como Google Chrome.

Por si no lo conocías, este estilo de menú lo tienes en el personalizador de WordPress, en los estilos de cabecera de la sección de formato de cabecera.

Ahora bien ¿y si queremos que el menú se muestre a la izquierda de la pantalla en vez de a la derecha?

Pues nada más fácil, solo tienes que añadir un poco de CSS del sencillito, en la sección de configuración de Divi o en el mismo personalizador de WordPress, en la sección de CSS adicional, y sería este código:

/* Menu hamburguesa deslizante de Divi a la izquierda */
#et-top-navigation {
float: left;
padding-left: 0 !important;
}
/* Movemos el menu a la izquierda al mostrarlo */
.et_pb_slide_menu_active header#main-header,
.et_pb_slide_menu_active #page-container {
left: 320px !important;
}
.et_pb_slide_menu_active .et_slide_in_menu_container.et_pb_slide_menu_opened {
right: auto !important;
left: 0 !important;
}
/* Ocultamos el menu en overflow */
body.et_pb_slide_menu_active {
overflow-x: hidden !important;
}
/* Movemos el logo a la derecha */
#logo {
float: right;
}
/* Cambiamos la animacion del menu */
.et_slide_in_menu_container {
left: -320px;
-webkit-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
-moz-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
}

Una vez publiques los cambios, tendrás este satisfactorio resultado en cuestión de segundos…