Centrar menú Horizontal superior (Top Menu) de Prestashop
Hola Amigos, en este ocación explicaremos como centrar el menú superior ( Top menú - Menú Horizontal - menú Principal) de una tienda Prestashop.Este modificación la realizaremos a través de FTP por lo que es esencial tener un cliente activo y un gestor de archivos instalado, en este caso usaremos FILEZILLA el cual es un software libre y lo puedes descargar en este enlace https://filezilla-project.org/download.php?type=client
También es recomendable que desactives el cache de tu tienda y trabajes en una ventana incógnita para que no te veas afectado o afectada por el cache del navegador y de esta forma poder ver todas las modificaciones de forma inmediata para cuando refresques el front Office de tu tienda.
Para lograrlo dirígete al back office de tu tienda, ve a parámetros avanzados , luego a rendimiento y allí seleccionas recompilar las plantillas cuando los archivos sean modificados. En la sección CCC desactiva todo los campos que estén activados, para terminar esta parte guarda estos cambios.
Ahora si, nos dirigimos a los archivos de la tienda desde Filezilla, abrimos la carpeta Themes (plantillas) aquí seleccionamos la plantilla que deseemos modificar. Encontraremos una cartpeta llamada CSS y dentro de esta una llamada Modules, en esta carpeta encontraremos todos las hojas de estilos de los módulos instalados en la tienda y que están asociados a la plantilla que estemos modificando. Buscaremos entonces el modulo blocktopmenu, este es el módulo por defecto que trae prestashop para controlar el menú superior, dentro de esta carpeta encontraremos de nuevo otra carpeta llamada CSS, ingresamos a esta y allí abrimos el archivo superfish-modified.css, puede usar cualquier editor de código, incluso puedes usar un blog de notas, en nuestro caso recomendamos usar el Notepad ++, este es un excelente editor de código totalmente gratis. Pegaremos entonces las siguientes lineas de código, puede ser al principio del fichero.
ul.sf-menu {text-align:center;}
ul.sf-menu li {
float:none;
display:inline-block;}
Guardamos los cambios desde el editor en el que estemos, vamos al navegador y refrescamos el front office de la tienda y seguramente si seguiste bien todo los pasos descritos podrás ver el Menú superior centrado, recuerda muy bien que el cache tanto de la tienda como la del navegador puede hacer que no veamos estos cambios de forma inmediata, por lo que puedes vaciar el cache del navegador y también vaciar manualmente el de la tienda, para esto puedes ir de nuevo a parámetros avanzados>rendimiento desde el back office, encontraras un botón en la parte superior que se llama Vaciar Cache.
En el siguiente video puedes observar el paso a paso para la implementación de este fragmento de código, te puede ser de mucha ayuda. Recuerda que te puede suscribir a este canal de YouTube, constantemente subimos videos como este.
