Comment installer un menu fixe sous Prestashop

Nous allons permettre à notre menu de rester toujours visible lorsque nous descendons ou montons sur notre page avec la scrollbar. Le menu va se figer en haut de page en scrollant, à une position que nous allons lui indiquer et revenir à sa position initiale ensuite.

Ouvrez deux fichiers:
Le fichier css de votre menu
Le fichier .tpl de votre menu

Votre fichier css:
Nous allons permettre à notre menu de "flotter" et de se figer à un endroit précis avec la scrollbar.
A l'origine, votre menu a une position "relative "
Nous allons lui attribuer une position "fixed"

ul#votremenu.floatable
{
position: fixed;
top: 15px;
z-index:9999;
}

Remplacer "votremenu" par l'id de votre menu.
Par exemple dans votre fichier .tpl, vous avez:

<ul id="topmenu">
---
</ul>

Dans votre fichier css, vous allez indiquer:

ul#topmenu.floatable
{
position: fixed;
top: 15px;
z-index:9999;
}

"Top" vous permet d'indiquer la marge par rapport au haut de page
(l'endroit où va se fixer votre menu).

Dans votre fichier .tpl de votre menu, nous allons maintenant inclure du code javascript.
Après votre balise , ajoutez:

<script type="text/javascript">

var positionElementInPage = $('ul#topmenu').offset().top;
$(window).scroll(
function() {
if ($(window).scrollTop() >= positionElementInPage) {
// fixed
$('ul#topmenu').addClass("floatable");
} else {
// relative
$('ul#topmenu').removeClass("floatable");
}
}
);

 </script>