Avisos
Vaciar todo

Cambiar comportamiento del menu superior horizontal al desplegarse en tema por defecto prestashop  

 
Enrique
 Enrique
Reputable Member

Hola quisiera cambiar el submenu que se despliega del menu horizontal superior. Voy a ajustar ciertas categorias, asi que varios elementos del menu quedaran con solo una columna al desplegar el submenu.

En vez de que ocupe todo el ancho de pagina tenga el nº de columnas que tenga, que el ancho se adapte al contenido de texto en lo posible y se alinee con el elemento del menu superior correspondiente, en vez de partir siempre desde la izquierda de la pantalla.

He estado probando con firebug y toqueteando el superfish-modified.css como otras veces pero no se que comandos usar.

Saludos y gracias

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 14/04/2016 11:57 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Enrique.
Prueba modificando el archivo ' superfish-modified.css ' que está en la siguiente ruta de tu prestashop '/themes/default-bootstrap/css/modules/blocktopmenu/css'.

Sobre la línea tienes lo siguiente:

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 100%; }

Modificarlo por esto:

.sf-menu > li > ul {
    padding: 10px;
    width: 200px;
}

En la línea 89 donde viene la regla .sf-menu li ul :
Eliminar la línea que pone "left: 0;"

En la 'linea 148' tienes lo siguiente:

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 100%; }

Modificarlo por lo siguiente:

.sf-menu > li > ul > li {
    padding-bottom: 10px;
    padding-right: 0;
    width: 100%;
}

Revisa si es eso lo que estás buscando.

Nota: Recuerda realizar una copia del archivo antes de cualquier modificación, solo con un corta y pega en el block de notas tendrás suficiente para dejarlo como estaba anteriormente.

Un saludo

ResponderCitar
Respondido : 14/04/2016 1:56 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Hola Pepe, menos lo de la linea 89, el resto no me coincide con mi archivo.

Te lo adjunto por si puedes echarle un ojo.

Muchisimas gracias y un saludo.

ResponderCitar
Respondido : 15/04/2016 7:41 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Revisa este hilo de discusión en donde se trata un tema similar
https://www.webempresa.com/foro/41-Preguntas-sobre-PrestaShop/145004-Lograr-menu-vertical-en-Plantilla-Default-de-Prestashop.html

Sin embargo actualmente veo correctamente que se genera el submenú de tu sitio web, tal vez el cambio del ajuste del ancho al texto ocupado no valga la pena, sin embargo puedes modificar

.sf-menu > li > ul{
width: auto;
}

PD. No se adjuntó tu archivo, siempre debes adjuntarlo en formato .zip

Saludos.

ResponderCitar
Respondido : 15/04/2016 11:01 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Hola, he conseguido dejarlo casi bien, pero me corta las palabras maldita sea y las manda una linea abajo. Fijaros en la imagen que os mando que es significativa de esto que digo. Si lo hiciese bien, seria perfecto.

Os digo lo que he hecho (todos los cambios en superfish-modified.css) Cada cambio ha hecho lo que decia:

- He borrado lo del left=0 (despliega justo debajo de cada opcion del menu)
- He puesto lo del width: auto; (se "ajusta" al texto en vez de coger todo el ancho de pagina)
- Tambien he modificado lo mismo que manda Jhon en el enlace, pero en mi superfish-modified.css linea 140 en vez de en el global.css como sigue:
sf-menu > li > ul > li {
float: none; (Pone las opciones de menu en vertical, en vez de horizontal. Coinciden con las categorias de segundo nivel)

Os mando mi superfish-modified.css tal y como esta modificado para esto mismo que os cuento.

Por favor a ver como puedo arreglar lo del corte de palabras que indico al inicio.

Gracias y saludos.

ResponderCitar
Respondido : 17/04/2016 3:18 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Enrique
Tienes la web en mantenimiento y no podemos realizar ninguna prueba, xfavor puedes dejarla activa?

Un Saludo

ResponderCitar
Respondido : 17/04/2016 3:24 pm

Enrique
 Enrique
Reputable Member

La puse en mantenimiento, pero al poco la volvi a activar de nuevo. Prueba a ver.

Gracias y saludos.

ResponderCitar
Respondido : 17/04/2016 4:20 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Enrique,

Así es como lo veo yo ahora:

No tengo constancia de como se veía antes pues no hay capturas del antes de los cambios de estilos CSS recomendados.

¿Es así como quieres que se muestre? ten en cuenta que el ancho variará en función de la cantidad de elementos de menú horizontales que despliegues, y que los elementos más a la derecha se mostrarán lógicamente con un ancho menor por mucho que tu lso fuerces por CSS ya que tu layout está limitado a 1170 pixels de ancho total.

Saludos

ResponderCitar
Respondido : 17/04/2016 9:12 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Enrique
 Enrique
Reputable Member

Hola.

Quiero que salga como sale pero que muestre las lineas sin cortarlas por palabras. No con el ancho al 100%.

Prueba si pones de nuevo el width: 100%;;" quitando el "auto" al que me referia antes como una de las opciones que toqué en el bloque de la linea 140 sale completo el texto. (mando foto en otro menu con mas palabras por linea de menu para que lo compares con lo que ahora tienes realmente con width: auto; en ese mismo sitio.

Ves la diferencia? Corta las opciones y solo muestra una palabra por linea. Mira la foto que te mando y como esta actualmente en el mismo menu ambas.

Saludos y gracias.

ResponderCitar
Respondido : 17/04/2016 9:29 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Déjalo nuevamente con width : auto, verticualmente, tal como te habia indicado, para ver que problema esta generando el cambio de línea

Saludos.

ResponderCitar
Respondido : 18/04/2016 6:54 pm

Cursos Gratuitos WordPress

Enrique
 Enrique
Reputable Member

Asi está desde hace tiempo.

saludos.

ResponderCitar
Respondido : 18/04/2016 7:15 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba agregar lo siguiente :

.sf-menu > li > ul > li{
  width:100%!important;
  margin-bottom:10px;
}

Al final del archivo :
/themes/default-bootstrap/css/global.css

Saludos.

ResponderCitar
Respondido : 18/04/2016 11:10 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Jhon la verdad que ha quedado bastante bonito.

Ahora si va bien. Muchisimas gracias por vuestro trabajo.

Saludos.

ResponderCitar
Respondido : 18/04/2016 11:57 pm