Theme WPastra

Menú Orbital en WP Astra Gratis

Uno de los themes para WordPress más versátiles s sin duda WP-Astra. Está muy optimizado en cuanto a código y no utiliza Jquery, por lo que tiene unos tiempos de carga ultrarápidos.

En esta ocasión quiero enseñaros un pequeño tip de CSS para trasladar el típico icono de hamburguesa para abrir en menú principal en móviles de la parte superior a la inferior, proporcionando una mejor experiencia de usuario y usabilidad, ya que en esa posición, nos queda más cómodo para pulsarlo y acceder al menú. También de esta forma no hace falta que hagamos el “header” fijo, dejandonos más espacio visible para el contenido.

Si abrimos el “Inspector de Código”, en nuestro navegador, lo ponemos en modo “responsive – dispositivos móviles” y seleccionamos el “menú de tres líneas”.

Encontrar La Clase CSS Del Menu

Podemos ver que la clase CSS que controla su apariencia es: “ast-mobile-menu-buttons“

Para modificar las propiedades de esa clase iremos a “Apariencia > Personalizar” y luego a “CSS/JS personalizado” e insertaremos el siguiente código:

.ast-mobile-menu-buttons {
position: fixed;
bottom: 7vh;
right: 3vh;
background-color: #fff;
box-shadow: 0 0 5px #000;
}

Si queremos que aparezca redondo añadiremos también: border-radius:50%;

Resultado
Resultado icono redondo

 

Último paso

Hacer que cuando hacemos click en el icono de menú éste nos parezca, ya que al si hacemos scroll, la cabecera se habrá ido arriba fuera de la pantalla. Tendremos que añadir:

z-index:9999; a la clase del icono .ast-mobile-menu-buttons

Y a la clase que controla los items de menú en mobile le añadimos estas propiedades:

.ast-header-break-point .main-header-bar .main-header-bar-navigation {
position:fixed;
top:0;
max-width:100%;
}

Rizando el rizo

Al quitar el icono del menú, el logo y el texto (si lo tienes) quedará alineado a la izquierda, para centrarlo añadiremos este CSS:

.ast-site-identity {text-align:center}

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *