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”.
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%;
Ú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}