Posición del menú en móvil

móviles | menú | CSS

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

Aquí puedes ver el resultado final:

https://coworking.multibuilder.es/