Aumentar menú superior

[Adrian]

Buenos dias.

Tengo un menú superior que hasta 767px me mantiene el menú "hamburguesa" con el logo en medio y a la derecha el icono de iniciar sesión y carrito. Me gustaria mantenerlo hasta 1217px. Como puedo hacerlo? Utilizo la plantilla classic y esto me lo hace automaticamente. Imagino que es algo del theme.css pero no veo donde tocar.

Si hace falta que ponga fotos para que se entienda mejor las pongo pero creo que se entiende bien lo que busco. Gracias!

Edited December 10, 2019 by Adrian (see edit history)

[Elina webs]

Buenos días Adrian,

Si vas a mirar el CSS del módulo del menú, no puedes ver el @media que hace el cambio del menú en formato "hamburgesa" a normal?

[Adrian]

En la carpeta ps_mainmenu (imagino que es este el modulo) no hay ningun archivo css. Y en ningun archivo php ni tpl pone nada de @media.

[Elina webs]

Puedes mandarme cual es tu página web para examinar un poco?

 

Gracias!

[Adrian]

Si claro. Te la envio por privado.

[Elina webs]

Tienes dos opciones:

1- Mirar si este theme tiene un mòdulo editor donde puedes definir a partir de que resolución cambiar a modo mobile.

2- Ir al siguiente fichero:

Quote

/themes/classic/assets/css/theme.css

 

Y sobre la línea 14, tienes que encontrarte el siguiente código:

Quote

 

@media (max-width: 767px)

theme.css:14

#header {

 

Modificas el valor al que tu necesitas y listo.

 

No obstante, si optas por la segunda opción, después intenta mirar si hay un módulo como te comento para ajustarlo directamente desde el Back Office.

[Adrian]

Desde el backoffice he estado mirando para no tocar código y no vi nada. Si que hay modulos de pago.

 

Y en cuanto a la línea que me comentas es justo la línea que intentaba cambiar desde inspeccionar elemento y como no veía cambios pues pensaba que no era esa. Lo cambiaré en css a ver si al guardar si funciona

[Elina webs]

Si correcto, mejor cambiar el código desde el fichero y luego recargar la página (y limpiar caché si la tienes activa).

Ya me avisas cuando lo puedas probar para ver si hemos dado con la solución o si tenemos que investigar un poco más.

[Adrian]

Parece que no es eso. Sigo mirando. Gracias por la ayuda

[Elina webs]

He estado mirando un poco más el comportamiento de tu header, y he visto el elemento a modificar por estilos en el mismo fichero CSS que te comentaba arriba.

Estos elementos son los siguientes:

Quote

 

@media (min-width: 768px)

theme.css:14

.hidden-md-up {

display: none;

}

 

Quote

 

@media (max-width: 767px)

theme.css:14

.hidden-sm-down {

display: none;

}

 

 

Estos dos elementos son los que hacen que el menú se vea de un modo en mobile y de otro en desktop en base a esta resolución.

Si modificas estos valores, verás como te funciona correctamente. No obstante, al ser clases globales, quizás será mejor que crees dos nuevas clases en estos elementos del header, les pongas el mismo valor "display: none;" y modifiques el "min-width" y el "max-width" por los valores que tu realmente necesitas.

Haber si esta respuesta si que te sirve.

 

Gracias,

[Prestafan33]

Yo no modificaría directamente esas reglas css. Las clases hidden-sm-down y hidden-md-up son usadas por varios elementos en el tema classic, y el cambiarlo seguramente afecte a más cosas de las que parece, incluso en otras páginas de tu web.

Es mejor usar otras clases, o incluso crear nuevas reglas combinando  esas clases con las de sus ancestros y no modificar el comportamiento de las reglas globales para no afectar a otros elementos.

De todas formas, cambiar la anchura a la que cambia el menú burguer al normal es complicado, porque normalmente en la cabecera cambian varios elementos a la vez, y esta diseñado para que sea así, por lo que si cambias la anchura a la que se modifica el menú también deberías cambiar el resto de elementos  de ese área para que quede bien (área de usuario, carrito, menú idioma y selector de moneda si tienes varias)...

Edited December 10, 2019 by Prestafan33 (see edit history)

[Adrian]

Pues mejor no toco nada. Ya me has cagado ejjejejjej 😣

[Elina webs]

Lo que dice Prestafan33 es correcto. Como te comentaba, si quisieras modificar los estilos que te comentaba, sería mejor crear unas nuevas classes y replicar el comportamiento y adaptarlo a lo que tu necesitas, ya que son clases globales las que te comentaba.

No obstante, podría ser que necesitarás tocar más cosas del header, pero esto lo puedes mirar tu haciendo alguna prueba en local. Al final, todos los headers se pueden modificar con más o menos trabajo.

[Adrian]

Ya pero no es algo que controle y prefiero no arriesgar. Cuando tenga tiempo me hago una copia de la página y ya probaré a hacerlo. Lo estaba haciendo pensando que iba a ser rapidillo jaja. Gracias a los dos.