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 : 172 
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


        • #5
          Le problème du Menu impossible à rendre 'sticky' avec Cassiopeia est effectivement bien connu. Et documenté. Ce qui manque, c'est plutôt une éventuele solution qui fonctionne.
          En attendant qu'une MAJ du template le rende possible directement dans les paramètres., je pense que plusieurs utilisateurs (dont moi!) seraient intéressés par la facon citée par Altacrea "d'intervenir sur l'index.php afin d'être indépendant du bloc header".
          J'ai réussi à utiliser l'attribut "Sticky" pour plusieurs blocs, dont les 'sidebar', mais impossible d'y parvenir sur le menu sans que tout le header soit concerné.
          altacrea aime ceci.

          Commentaire


          • #6
            Beaucoup de temps passé sur Cassiopeia avant que je change totalement mes outils et donc d'environnement de travail.
            Avant :
            tout gratuit, override dans tous les sens, des heures de customisations fatigantes et des fonctions puissantes rajoutées grâce à UP.
            Aujourd'hui:
            Abonnement pro avec Yootheme. Un bonheur total. ex: stiky menu horrible a mettre en place en natif, avec Yoo, un clic!!!!

            Tellement de vie gagner avec cette solution !
            jeejeeboy et woluweb aiment ceci.

            Commentaire


            • #7
              Merci pour la piste Yootheme, je vais regarder ça avec attention.

              Pour le moment, concernant le menu 'Sticky' avec Cassiopeia, pour obtenir le résultat le plus efficace et ergonomique possible, sans manipulation trop complexe (puisque j'espère une Mise à Jour assez rapide qui permettra de le faire nativement), j'ai mis en place une solution temporaire :
              • Je n'utilise aucun logo, ni image header (En-tête du site sur 'NON' dans les paramètres avancés du 'Style : Défaut' du Template Cassiopeia)
              • J'ai créé un module "Personnalisé" LOGO, en position topbar, contenant mon logo, et assigné uniquement aux pages d'accueil, de modification de profil, etc...
              • Ainsi, les pages contenant beaucoup de contenu ne sont pas encombrées par un logo mais contiennent bien un menu Sticky en haut. Et les pages moins garnies permettent d'afficher un bandeau header, un logo etc...
              Envoyé par altacrea Voir le message
              des fonctions puissantes rajoutées grâce à UP.
              !
              On ne le dira jamais assez!

              Je ne sais pas si j'aurais continué à développer sous Joomla sans LOMART.
              En tous cas, aucun de mes sites n'intègre pas au moins 5 ou 6 actions UP (et LM-Custom, d'ailleurs).
              Si il existe encore des adeptes de Joomla non initiés, courrez! C'est par là
              altacrea aime ceci.

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X