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
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
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.
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.
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.
Hola Enrique
Tienes la web en mantenimiento y no podemos realizar ninguna prueba, xfavor puedes dejarla activa?
Un Saludo
La puse en mantenimiento, pero al poco la volvi a activar de nuevo. Prueba a ver.
Gracias y saludos.
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
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.
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.
Asi está desde hace tiempo.
saludos.
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.
Jhon la verdad que ha quedado bastante bonito.
Ahora si va bien. Muchisimas gracias por vuestro trabajo.
Saludos.