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

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.

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