Cette question a été posée sur le forum joomla.fr. J'ai pu trouver une solution en utilisant mon module LM-Custom avec un script simple de Olof Enström

En effet, on ne peut pas utiliser la propriété position:sticky avec Protostar car le menu n'est pas un enfant direct de body. Il faut ruser en transformant la position du menu en "fixed" lorsqu'il devient invisible.

Etape 1

Il faut installer le module LM-Custom (version site) et le publier en position debug pour toutes les pages (https://lomart.fr/extensions/lm-custom).

Ce module permet d'incorporer facilement du code HTML, PHP, CSS, JS ainsi que des fichiers JS et CSS dans une page. Il permet aussi de le faire sous conditions, mais cette fonction est inutile dans ce cas.

Etape 2

Dans l'onglet HTML/PHP, il faut mettre ce code qui va se retrouver en fin de page du fait que c'est la position du module debug.

<script>
    jQuery(document).ready(function($) {
        $(function() {
          $("nav.navigation").simpleStickyHeader();
        });
    });
</script>

Etape 3

Dans l'onglet CSS, on ajoute les règles CSS qui seront appliquées au bloc "nav.navigation" pour qu'il colle au haut de la fenêtre

Il est bien entendu possible de l'adapter au look de votre site en modifiant les valeurs de background-color, color et text-align.

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  text-align:center;
  background-color:#fff;
  z-index:99;
}
.sticky-header ul {
  display: inline-block;
}

Etape 4

Dans l'onglet JS, on va ajouter le code JS récupéré sur Internet. J'ai choisi l'option de copier le code dans la zone code, mais on aurait pu faire un lien pour charger le fichier récupéré sur github.

/**  @author Olof Enström : https://github.com/oenstrom/simple-sticky-header */
(function($) {
    $.fn.simpleStickyHeader = function(options) {
        var that = this;
        var headerOffsetTop = that.offset().top;

        var settings = $.extend({
            class: "sticky-header"
        }, options);

        var toggleFixedClass = (function toggleFixed() {
            that.toggleClass(settings.class, $(window).scrollTop() >= headerOffsetTop);
            return toggleFixed;
        })();

        $(window).scroll(toggleFixedClass);

        return this;
    };
}(jQuery));

J'espère que ce bout de code pourra vous aider à utiliser et adopter Protostar qui est un très bon template, simple comme je les aime.

Print Friendly and PDF