Fixer le menu sur prestashop 1.6

Pour pouvoir fixer le menu ou le haut de prestashop afin que le reste puisse se dérouler sans souci. Il faut ajouter dans un premier temps dans le fichier javascript global.js (qui se trouve dans votre template nom_de_votre_template/js/global.js) ce petit code :

var menu_fixe, yPos;
   function yScroll()
{
        menu_fixe = document.getElementById('menu_fixe');
     yPos = window.pageYOffset;
     if(yPos > 0)
          {
          menu_fixe.style.top="0px";      
     menu_fixe.style.position="fixed";
          }
     else
          {
         menu_fixe.style.paddingTop = "0px";
    menu_fixe.style.height = "0px";
    a.style.opacity="0";
           }
}
window.addEventListener("scroll", yScroll);

Une fois ce code copié vous enregistrez le fichier et vous l’envoyez sur le site.

Ensuite il faut rajouter une <div> dans le header.tpl qui se trouve à la racine de votre theme. Vous mettez cette div <div id="menu_fixe"> à l’endroit que vous souhaitez voir se fixer.
Une fois la div mise, envoyez le fichier sur le site.

Et pour terminer, il faut rajouter le style dans le fichier global.css qui se trouve dans le dossier css

#menu_fixe {
  transition: height 0.1s linear 0s;
  width:100%;
  z-index:1;
  position:fixed;}

Par contre il faut modifier le padding-top de la class .columns-container en même temps dans le fichier global.css et vous mettez la marge correspondant afin que le reste du site soit entièrement visible.

Une fois la marge modifiée vous envoyez ce fichier sur le site. Vous réactualisez et normalement si tout va bien ça fonctionne !!!

Si vous aimez cette astuce n’hésitez pas à la partager sur facebook ;-)