Menu horizontal superior de Prestashop 1.6 en modo pegajoso/sticky menu

11 mayo, 2015 |

Si te gusta, compártelo ;)

Vista previa Menú horizontal superior pegajoso en Prestashop 1.6

El menú de navegación es uno de los aspectos más importantes de cualquier tienda o página web. Antes de la llegada de los menús "pegajosos", si nos desplazábamos hacia abajo en una página debíamos volver a subir a la parte superior de la misma para acceder de nuevo al menú de navegación. Desde hace algún tiempo está aumentando la popularidad de los llamados menús de navegación "pegajosos", (sticky menu en inglés).

Los menús "pegajosos" quedan fijados en el top de la página al hacer scroll hacia abajo, de forma que el menú siempre se encuentra accesible, sin necesidad de volver a la parte superior de la página, mejorando la accesibilidad de la página.

En este tipo de menú vamos a convertir el menú horizontal superior de Prestashop 1.6, y para que veáis un ejemplo, aquí podéis ver un demo del funcionamiento de este menú, antes de que sigáis con el tutorial, así podréis convenceros de las ventajas de este tipo de menú:

Demo de menú pegajoso

Comencemos... El archivo blocktopmenu.css

Primeramente crearemos la parte visual del menú. Daremos al menú una anchura del 100% para que ocupe toda la anchura del navegador. Le daremos una posición absoluta y estableceremos un fondo con transparencia.

Crearemos una regla para la clase .scroll, que será la que fije el menú a la parte superior.

Para lograr esto deberemos abrir el archivo ../prestashop/themes/default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css y pegar el siguiente código al final del archivo.

/* Estilo para fijar el menú superior al hacer scroll */
  
  #block_top_menu {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 59px;
    padding: 0;
    border-bottom: 3px solid #e9e9e9;
    background: rgba(246, 246, 246, 0.8);
    }
 
.scroll {
    background: rgba(246, 246, 246, 0.8);
    position: fixed !important;
    top: 0;
    }

El archivo global.css

Para colocar el menú pegado a los bordes del navegador y añadir un relleno inferior al header tendremos que insertar el siguiente código en el archivo ../prestashop/themes/default-bootstrap/css/global.css

/* Estilo para fijar el menú superior al hacer scroll */

header .row {position: static;} /* Sobreescribe la regla original con position: relative; */

#header {padding-bottom: 79px;}

Penúltimo paso, el archivo superfish-modified.css

En este archivo eliminaremos el fondo del menú y lo alinearemos al centro; insertar este código en el archivo ../prestashop/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css:

/* Estilo para fijar el menú superior al hacer scroll */
  
.sf-menu {margin: 0 auto; background: none;}

Establecer un color de fondo para dispositivos móviles

Para terminar con los archivos css daremos un color de fondo al menú en dispositivos móviles; insertar el siguiente código en el archivo ../prestashop/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css:

/* Estilo para fijar el menú superior al hacer scroll en dispositivos móviles */
  
@media (max-width: 767px) {
.sf-menu{background: #f6f6f6;}
}

Añadir la clase .container en la plantilla del menú

Abrir el archivo ../prestashop/themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl y buscar la línea

<ul class="sf-menu clearfix menu-content">

Añadir a esta etiqueta la clase .container, de forma que quede así:

<ul class="sf-menu clearfix menu-content container">

Para finalizar colocaremos un pequeño script para que todo pueda funcionar. Lo insertaremos al final de este mismo archivo


Basicamente lo que hace este script es otorgar la clase .scroll a la etiqueta <div id="block_top_menu"... cuando se hace scroll hacia abajo, y retirar esta clase cuando se vuelve a la parte superior de la página.
Menú horizontal superior pegajoso en Prestashop 1.6

Y esto es todo, suerte y que os salga bien!

29 comentarios:

  1. Buenos días.
    He seguido todos los pasos pero el resultado no ha salido bien: el menú se queda encima del logo y no se fija arriba de la pantalla cuando haces scroll.
    De todas formas gracias por la información.
    Santiago

    ResponderEliminar
    Respuestas
    1. Hola,
      Si has seguido los pasos bien tendría que funcionar.
      Vacía la caché de la tienda y borra los cookies del navegador o pruébalo con otro navegador.
      El código JavaScript debes insertarlo al final del archivo blocktopmenu. tpl

      Eliminar
    2. Buenos dias francisco, no encuentro el codigo javascript que mencionas aqui por ningun lado, o yo lo tengo que hacer?

      Eliminar
  2. que termina todo el proceso, haciendo clic en el añadir a la cesta, me Janeta pop encima de la derecha, no originalmente en el centro! por favor ayuda

    ResponderEliminar
    Respuestas
    1. Hola, no he entendido muy bien tu problema. ¿Podrías explicármelo un poco mejor?

      Eliminar
  3. Gracias por la info. soy nueva en esto...

    He seguido todos los pasos y no me hace ningún cambio, lo he probado con la plantilla por defecto y recién instalado sin cache ni cookies.

    he insertado todos los códigos al final del archivo, ¿tal vez sea eso? también tengo una duda clase .container no se si va escrita con punto o sin él.

    ResponderEliminar
    Respuestas
    1. Hola, los nombres de clase siempre van con un punto delante. O sea:
      .container

      Eliminar
  4. Hola de nuevo, el problema era que estaba modificando los "archivos".css.map y no los .css

    Funciona a la perfección, muchas gracias

    ResponderEliminar
  5. Muy buen tutorial y muy práctico, me ha funcionado a la perfección.

    Gracias por el aporte.

    ResponderEliminar
  6. Gracias por compartir la información!!!!

    He instalado y me han salido un par de errores de estilo, UNa era la altura de la barra de menú, que estaba encima de logos y búsqueda, pero ya lo he conseguido solucionar.

    Tengo otro, que es al hacer scroll,cuando la barra se pega al TOP, los botones se desplazan al margen izquierdo completamente, en vez de quedarse en su posición como en la web de muestra que nos pones.

    Podéis guiarme un poco para saber que tengo que modificar.

    gracias de nuevo

    ResponderEliminar
    Respuestas
    1. Hola,

      Seguramente alguna regla CSS está interfiriendo, si usas Chrome tienes la opción de "Inspeccionar elemento". Con esta opción puedes ver las reglas css, pero tendrias que tener alguna noción de CSS.

      Eliminar
  7. Funcionó a la primera y de lujo muchas gracias por compartirlo con todos, un crack

    ResponderEliminar
  8. hola no me aparece este archivo
    /prestashop/themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl

    solo me falta este paso
    tengo la version 1.6.1

    ResponderEliminar
    Respuestas
    1. Hola, me he descargado esa versión, la 1.6.1.0 y sí que aparece ese archivo.

      Eliminar
  9. Gracias he verificado y si esta ahi

    ResponderEliminar
  10. Buenos dias! primero que nada felicitarte, tienes un excelente blog con muy buenos aportes!
    ya he hecho varios de tus tutoriales y todos funcionan perfectamente.
    Mi duda es la siguiente, al estar haciendo este tutorial al final, despues de hacer todas las modificaciones no pasa nada en la pagina, y ya guarde los archivos y borre la cache del navegador e hice todas las modificaciones, pero creo que me falto una, la parte donde dice que al final agregamos un script "Para finalizar colocaremos un pequeño script para que todo pueda funcionar. Lo insertaremos al final de este mismo archivo" pero no veo el script al que te refieres y pues no lo he agregado o te refieres a agregar un script vacio nomas?
    De antemano gracias por tu ayuda :)

    ResponderEliminar
    Respuestas
    1. Hola,
      Perdón por la tardanza en responder. El Script al que te refieres se encuentra en el último bloque del artículo. El último bloque con fondo negro exactamente. ¿No puedes verlo?

      Eliminar
    2. No te preocupes Francisco! Ya lo pude ver era un problema con la red de la universidad, en cuanto llegue a mi trabajo entre y ya lo pude ver! Muchas gracias por los aportes! saludos

      Eliminar
  11. Hola Francisco!, gracias por el aporte.
    He seguido los pasos como comentas, pero me aparecen los botones pegados al lado izdo y al bajar no se pone transparente el fondo.
    Soy novato, te agradezco la ayuda de antemano.

    ResponderEliminar
  12. Hola,
    Asegúrate de que has seguido bien los pasos. Fuerza compilación y vacía la caché desde el Backoffice de Prestashop.
    Coloca las reglas CSS al final del archivo CSS en cuestión, así las reglas harán mejor su efecto.
    A ver si así te funciona.

    ResponderEliminar
  13. gracias por responder tan rápido. He vuelto a repetir los pasos, ahora los botones si aparecen en su posición pero sigue sin hacerse transparentes los botones. Inspecciono el elemento y aparece el background: none; tachado, encima de esto aparece #header .sf-menu con un color. Intento modificar este archivo que esta en la carpeta cache pero al modificar este crea un nuevo archivo. ¿que puedo hacer?. Otra duda hay alguna forma de que la barra no aparezca en la página del carrito.
    Muchas gracias por tu paciencia

    ResponderEliminar
  14. Los cambios que hagas en el CSS debes hacerlos (por ejemplo ) en el archivo global.css de tu plantilla. Mira la página demo y observa el código CSS mediante el Inspector de Elemento.

    Este es el demo:
    http://belvg.net/tatiana/prestashop/demo/index.php

    Si te refieres a que no quieres que aparezca el menú en la página del carrito, puedes utilizar esta regla:

    body#order div#block_top_menu {display: none;}

    ResponderEliminar
  15. Hola Francisco muy bueno este tutorial, me gustaría preguntarte como podría añadir el bloque del carrito para que se fije dentro del menu pegajoso (sticky). ¿Cómo lo puedo hacer?

    ResponderEliminar
    Respuestas
    1. Hola,
      Ponte en contacto conmigo a través de mi correo si quieres: releitor101@hotmail.com

      Eliminar
  16. Funciona perfectamente, en un principio no bajaba el menú, pero como dices solo hay que vaciar la caché de la tienda que se encuentra en parámetros avanzados/rendimiento.

    Muchas gracias me a sido de mucha utilidad.

    ResponderEliminar
  17. Muy bueno, funciona estupendamente!!!

    ResponderEliminar
  18. Hola Francisco, he seguido todos los pasos cuando me desplacé el menú desaparece por completo, puede usted por favor me ayude?

    ResponderEliminar
    Respuestas
    1. Hola, sí has seguido bien los pasos debería funcionar. Vacía la caché, fuerza compilación, borra la caché del navegador o las cookies.

      Eliminar