demande d'aide sticky menu?

[shreed]

Bonjour a tous!

Alors voilà, pour le petit background je découvre Joomla et les CMS en général (donc je suis pas sur d'utiliser les bons termes techniques) .

Je suis en train de bidouiller un site en utilisant le template zo2_sportlive, et je me retrouve face à un problème avec le menu: (C'est un menu horizontal.)

Lorsque je modifie la taille de mon navigateur, tous les éléments du template se rétrécissent, le menu aussi.
Et à une taille donnée, le menu devient trop petit pour les éléments de menu, et ceux ci apparaissent sur deux lignes. Puis lorsque la fenêtre est trop petite, le méga menu laisse la place a un sticky menu.

Je voudrais directement passer du menu a une ligne au sticky menu, j'ai regarde et bidouille les fichiers css, less, etc... pour essayer de régler le problème, mais je ne trouve pas vraiment la solution.
Si une âme charitable de passage pouvait m'apporter un peu de lumière, je lui en serai reconnaissant!
Merci d'avance.

[SimonG]

Re : demande d'aide sticky menu?

Bonjour et bienvenue,

je n'ai pas réussi à trouver ce template sur le web, aurais-tu une URL ?

[shreed]

Re : demande d'aide sticky menu?

Bonjour et merci pour ta réponse.

Voilà un lien vers le template dans l'état de base. J'ai bien-sûr ajouté du contenu et modifié l'arborescence et un peu le layout pour correspondre a mes besoins.
http://zt-sportlive.zoodemo.com/inde...homepage/boxed

[fyleos]

Re : demande d'aide sticky menu?

Bonjour,

Il y a une media query (@media (max-width: 767px)) dans template.css ligne 5266. Essais d'augmenter la valeur de de la média query, le bouton s'affichera plus tôt. Pense à modifier (si le template est construit ainsi) la media query qui fait disparaître le menu "normal".

[shreed]

Re : demande d'aide sticky menu?

Hello!

Avant de me resoudre a demander de l'aide, je bidouillais un peu autour de ces media query que je ne comprenais pas trop =D.

Je modifie plutot les fichier less, j'ai l'impression qu'il regenerent les fichiers css a chaque refresh?
Alors j'ai modifie la ligne correspondante dans le fichier less, donc le menu disparait bien au bon moment (sauf le bouton d'accueil oO ) mais le sticky menu apparait au meme moment qu'avant. J'essaye de trouver le trigger du sticky menu pour pouvoir modifier en consequence, mais je galere un peu.

En tout cas merci pour l'aide et les reponses et desole pour ma noobitude !

[lomart]

Re : demande d'aide sticky menu?

Bonjour,

C'est du bootstrap 3.
Il faut jouer sur les points de rupture (breakpoints) dans le fichier variables.less.
A première vue, il doit s'agir de la variable @screen-sm

[shreed]

Re : demande d'aide sticky menu?

Bonjour,

Je n'ai pas trouve cette variable "@screen-sm" dans le fichier variable .
la seule variable un peu interessante que j'ai trouve est:

// Navbar
// -------------------------
@navbarCollapseWidth:             979px;

Je l'ai modifie et ca n'a rien change.
Dans template.less, j'imagine que je peux faire ce que je veux dans cette portion du fichier, mais je ne m'y retrouve pas.

/*responsive*/
@media (min-width: 1200px) {
    #zt-mainmenu .navbar-default ul.navbar-nav > li.featuresWrap .mega-dropdown-menu{
        max-width: 1140px;
    }
}
@media (max-width: 1199px) {
  #zt-mainmenu .navbar-default ul.navbar-nav > li.featuresWrap .mega-dropdown-menu{
    max-width: 100%;
  }
}
@media (max-width: 1024px) {
  #zt-mainmenu .navbar-default ul.navbar-nav > li > a{
    padding: 0 10px;
  }
  .box_welcome{display: none!important;}
}
@media (max-width: 992px) {
    #zt-mainmenu .navbar-default ul.navbar-nav > li .mega-dropdown-menu{
        max-width: 220px!important;
    }
    #zt-bottom .footer_zo2_logo{
        float: none!important;
        margin: 15px 0!important;
        text-align: center;
    }
}
@media (max-width: 800px) {
    #zt-mainmenu .navbar-default ul.navbar-nav > li > a{
        font-size: 110%;
    }    
}
@media (max-width: 1200px) {
    #zt-search{
        display: none!important;
    }
    .rtl #zt-mainmenu{
        right: auto;
        left: 0;
    }
    div.itemComments .form-validate .cform-right{
        padding: 0;
    }
    .itemAuthorContent div{
        width: 100%!important;
        margin: 0!important;
    }
    .modal.fade{background: rgba(0,0,0,0.5); }
    .modal-backdrop.fade{display: none!important;}
    #zt-the-club-features{
        margin: 0 0 20px;
    }
    #zt-mainframe .blog-featured .zt-services .module{
        margin: 0 0 20px;
    }
    .tp-caption a.btn{
        font-size: 12px;
        height: 35px;
        line-height: 35px;
        padding: 0 15px;
    }
    #zt-bottom {
        .copyright,#bottom-social{
            text-align: center!important;
            margin: 0 0 10px;
        }
    }
    .tp-bullets.simplebullets.round-old .bullet{
        width:14px;
        height: 14px;
        line-height: 10px;
        &:after{
            font-size: 9px;
        }
    }
    #zt-language, #zt-top-menu{
        width: 100%!important;
        text-align: center!important;
    }
    #zt-logo, #zt-social{
        width: 100%!important;
    }
    #zt-header .zt-social{
        text-align: center;
    }
    #zt-logo #header_logo a{
        margin: 0 auto;
    }
    .style-switcher{
        display: none;
    }
    #zt-mainmenu{
        position: absolute;
        top: 110px;
        right: 0px;
        left: 0;
        max-width: 40px;
    }
    .pricing_wrap_3 .pricing_box{
        width: 100%!important;
    }
    .pricing_wrap_3 .featured .pricing_box{
        top: 0;
    }
}

@media (max-width: 568px) {
    .blog .article_content .article_bottom {
        text-align: center;
        .article-info{
            width: 100%;
            float: none;
        }
        .itemReadmore{
            float: none;
        }
    }
    #eblog-wrapper .article_content .blog-footer{
        text-align: center;
        .blog-infor{
            width: 100%;
            float: none;
            span{
                float: none!important;
            }
        }
        .blog-readmore{
            float: none!important;
        }
    }
}
@media (max-width: 480px) {
    
    #zt-top-menu{
        margin: 10px 0 0;
    }
}
@media (max-width: 320px){
    .blog-featured table.table-striped .item-state{
        display: none;
    }
    #zt-parallax-slide p{
        font-size: 120%;
    }
    .image-parallax-container .image-parallax-container-bg .image-parallax{
        height: 100%;
    }
    #zt-mainmenu{
        top: 125px;
    }
}


@media (max-width: 1199px) and (min-width: 992px){
    #zt-search .search .search-inner{
        width: 970px;
    }
}
@media (max-width: 991px) and (min-width: 768px){
    #zt-search .search .search-inner{
        width: 750px;
    }
}

.style-switcher ul.options.color-select li{
    width: 22px;
    margin: 3px;
    a{
        height: 16px;
    }
}
.style-switcher ul.options.layout-select li a img {
    width: 56px;
}
.style-switcher ul.options.background-select li{
    cursor: pointer;
}

Merci

[lomart]

Re : demande d'aide sticky menu?

C'est marrant, @navbarCollapseWidth n'existe plus dans bootstrap 3 alors que les classes utilisées dans le template soient de cette version (ex: col-md-12)
L'affichage est géré par les classes hidden-xx et visible-xx qui sont activées par mediaqueries selon le point de bascule défini dans variables.less
Je n'ai pas le template, donc impossible de t'aider plus

[shreed]

Re : demande d'aide sticky menu?

Arf, tant pis.
Je vais continuer de me renseigner, alors.
Merci pour l'aide en tout cas .

[lomart]

Re : demande d'aide sticky menu?

Recherche les occurrences de hidden-md dans tes fichiers less, tu devrais trouver comment est défini le point de rupture des médiaqueries