Cómo cambiar el ancho de Tablet y Móvil en Astra

¿El menú de tu web de Astra se monta en dos líneas en portátiles pequeños? En este artículo cómo solucionarlo fácilmente.

Uno de los problemas más comunes cuando trabajamos la parte responsive de una web es cómo se colapsa el menú.

De hecho, es bastante común que veamos que nuestro menú se monta en dos líneas en portátiles de pantalla pequeña, independientemente de la distribución que tengamos.

En este caso, por ejemplo, eran dos menús con el logo en el centro, pero puede pasar lo mismo con el menú a la derecha o como sea.

Menú en dos lineas Astra
Ejemplo de menú colapsado en 2 filas en portátiles con pantalla pequeña

Como ves, es un menú complejo con iconos a la derecha, y que quede así no es lo ideal…

¿Quieres saber cómo evité que se me montaran los menús en esta web hecha con el tema Astra?

Pues muy sencillo.

Cómo evitar que el menú se monte el menú en dos filas en el tema de WordPress Astra

De forma general, en cualquier web hecha con WordPress o con cualquier otro CMS hay varias cosas que podemos intentar para evitar que el menú colapse en dos renglones.

Podemos reducir el tamaño de la letra de los items, reducir el padding de los mismos, usar submenús o poner exclusivamente lo imprescindible (que es lo más recomendado).

Pero hay veces que todo eso no es suficiente y cuando pasa eso ¿Qué hacemos?

En este caso mi cliente necesitaba tener todos esos items en el menú y para solucionarlo lo que hice fue cambiar las dimensiones en las que Astra salta a formato Tablet.

Para ello simplemente tenemos que añadir una función en el functions.php de nuestro Child Theme o usando un plugin de funciones como Code Snippets.

Cambiar las dimensiones de pantalla a las que Astra salta a Tablet y Móvil.

Por defecto, Astra define estos anchos de Pantalla:

  • Versión Ordenador/ Portátil: más de 921 píxeles
  • Versión Tablet: entre 921px y 768px
  • Versión Móvil: menos de 544px

Pero es algo que podemos modificar a nuestro antojo de manera sencilla.

Lo único que necesitamos son estas funciones:

// Cambiar el punto de ruptura de Astra en tablet
add_filter( 'astra_tablet_breakpoint', function() {
    return 921;
});
// Cambiar el punto de ruptura de Astra en móvil
add_filter( 'astra_mobile_breakpoint', function() {
    return 544;
});

Como puedes ver en esa imagen, lo único que hay que hacer es cambiar el número en la que la web va saltando de una versión a otra.

En este caso fueron 1425 píxeles de ancho de la pantalla.

cambiar ancho tablet astra
Código introducido en Code Snippets para cambiar el ancho en el que la web rompe a tablet

Así conseguimos que la web salte a tablet y en lugar de tener un menú colapsado en dos líneas, que es algo que no queda bien, conseguimos tener la web en formato tablet que es más elegante y usable.

¡Muchas gracias por leer y espero que te sea de utilidad este tutorial!

Si no tienes el tema de WordPress Astra, pero tienes el mismo problema, déjame un comentario y te informo de otras formas de conseguirlo.
También puedo crear un vídeo en mi Canal de Youtube.

Y si prefieres que me encargue yo personalmente, por supuesto también puedes contratarme.

¡Un saludo!

Deja un comentario

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

¿Necesitas ayuda?

Si estás teniendo problemas con tu proyecto online, si estás en proceso de crearlo, si necesitas una web o si la tuya no funciona como debería puedo ayudarte.

Carrito de compra
Scroll al inicio