Cassiopeia et sticky css marche pas

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Problème] Cassiopeia et sticky css marche pas

    Bonjour, je suis bloqué sur ma customisation du template Cassiopeia (mode colonne en tête non fixe).

    Je tente sans succès d'utiliser la propriété position : sticky sur mon container de menu.
    Cliquez sur l'image pour l'afficher en taille normale

Nom : capt 1.jpg 
Affichages : 103 
Taille : 132,4 Ko 
ID : 2047350


    Je voudrais que ce container se fixe dés que le scrolle arrive en haut du site.

    Dans mon user.css (sans succès)
    Code HTML:
    .container-header .container-nav {
    position: sticky;
    top:0
    }
    Un exemple de ce que je recherche :
    Linelabox - Live Joomla! Template Builder. Build Joomla! template in real-time with no coding and CSS knowledge.


    Une aide s'il vous plaît?

    Fichiers joints

  • #2
    il y a directement une option Sticky dans les paramètres de Cassiopeia
    Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

    Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

    Commentaire


    • #3
      Envoyé par woluweb Voir le message
      il y a directement une option Sticky dans les paramètres de Cassiopeia
      Merci, mais cette option, bien connue, rend le bloc entier (header) fixe! Ce n'est pas ce que je veux.
      Sur la capture, la section encadrée en rouge est la partie concernée.(soit ".container-header .container-nav ")
      Dans le lien web d'exemple, on voit bien une seule section concernée (menu) https://www.linelab.org

      En faite il s'agit aussi de réussir à faire du sticky dans certaines parties du header.

      Ca marche dans la partie "site-grid" du site avec des pbs d’empilement (z-index) et autres parasites css.
      Par exemple : pour la partie module newflash de page d’accueil :
      Code HTML:
      .container-top-a {
      position: sticky;
      top:0
      }

      Ca ne marche pas dans la partie "header"
      Par exemple : pour la partie logo du header :
      Code HTML:
      .container-header .navbar-brand {
      position: sticky;
      top:0
      }
      Dernière édition par altacrea à 23/01/2023, 18h30

      Commentaire


      • #4
        Bonjour,

        Pas eu de réponses dommage.
        J'ai cependant résolue le problème en intervenant sur l'index.php afin d'être indépendant du bloc header.
        Ouf, un pb de + résolue.

        Commentaire

        Annonce

        Réduire
        Aucune annonce pour le moment.

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X