A veces nos gusta cambiar un poco el orden de las cosas, y en el caso de la versión móvil de nuestra web, queremos que sea manejable y a la vez atractiva estéticamente. En esta ocasión vamos a modificar el orden de la navegación móvil de Generatepress.
La idea es colocar el menú alternativo en la izquierda y centrar el logo con lo opción de activar el icono de búsqueda en la derecha. Todo esto lo conseguiremos con un sencillo CSS y activando la opción de menú como encabezado. Todo desde el personalizador de WordPress.
1ª Opción
- Apariencia – Personalizar – Diseño – Cabecera – «Usar navegación como encabezado» una vez marcado nos vamos a «Navegación Principal» y activamos la búsqueda.
- Sin salir del personalizador, al final a la izquierda CSS personalizado: insertamos el siguiente código.
* No activar opción encabezado móvil.
@media(max-width: 768px) {
#site-navigation .menu-toggle {
order: -1;
}
#site-navigation .navigation-branding {
margin: auto;
}
}Guardamos los cambios y entramos con un móvil a la web. Si todo está correcto deberá de funcionar y parecerse a esto:
2ª Opción. «Con encabezado móvil activado»
De esta manera separamos la versión móvil totalmente de la de escritorio marcando desde Diseño – Cabecera – Activar encabezado móvil.
Y sustituimos el código anterior por este:
.site-logo.mobile-header-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}Guardamos cambios y listo.
Mientras Generatepress no de mejores opciones de cambio de posición en encabezados hay que recurrir al CSS.
