En este artículo te enseñaremos a mover al lado derecho el menú de hamburguesa que aparece por defecto en vista de móvil.
Esto es lo que haremos:
Mover la hamburguesa del menú de izquierda a derecha
Lo único que tenemos que hacer es agregar el siguiente código CSS en Ajustes de página>Código personalizado>Código global personalizado>CSS personalizado. Dentro del código tienes más instrucciones:
/*Mover el menú burger de móviles a la derecha*/
@media (max-width: 768px) {
/* Desplaza el menú hamburguesa y el menú completo a la derecha*/
.theme .burger {
float: right;
left: unset;
right: 20px;
/*background: transparent;*/
}
.mobile-header-wrapper, .mobile-popup nav {
left: unset;
right: -270px;
-webkit-transition: right .5s ease;
-moz-transition: right .5s ease;
transition: right .5s ease;
}
.open .mobile-header-wrapper {
left: unset!important;
right: 0!important;
}
.open .header-wrapper, .open>.content, .open .mobile-menu {
left: -240px !important;
}
/*Si lo necesitas, alinea el logo a la izquierda. Solo tienes que añadir a margin: 0 20px, o con los valores que necesites*/
.theme .theme-logo a {
margin: ;
}
/* Alinea el texto a la izquierda dentro del logo*/
.theme .theme-logo a>span, .theme .theme-logo p {
text-align: center;
}
/*Alinea al centro del texto del menú*/
.mobile-header-wrapper .header-widget .text-widget-content {
text-align: center;
}
}
