[Résolu] Menu horizontal : Image sur une seulle catégorie

[calypsoh]

Salut à tous (premier message...)

Encore en découverte du dev sous Prestashop et un peu perdu...

Quelqu'un·e pourrait me dire comment paramétrer (où coder en css) une image dans le menu horizontal pour une seule catégorie ?

Imaginez que j'aimerais que la première catégorie (à gauche) soit non-pas représentée par une expression (genre « catégorie 1 ») mais par un petit logo en 35px.

Edited June 25, 2019 by calypsoh (see edit history)

[R.Shredder]

Hello

Commence par ajouter ton image dans "themes/tontheme/assets/img/"

Ensuite, je ne sais pas quel type de menu tu utilises, mais dans ton custom.css, il va te falloir cacher le texte du bouton de menu concerné. Ajoute quelque chose comme ça :

#tonmenu a :nth-child(1){background:url(../img/imagedefond.png) center no-repeat; background-size: contain;}

#tonmenu a :nth-child(1) span{opacity: 0;}

si tu pouvais poster le lien du site concerné, ça serait bien !

[calypsoh]

Salut

Merci

Je comprends l'astuce, mais je ne pige pas la syntaxe... Voici le site en cours de dev http://prestashop-yachus.infotonome.fr

J'ai essayé plusieurs trucs dont ça :

#sf-menu a :nth-child(1){background:url(/prestashop/img/Yachus-rosamel-transparent-35px.png) center no-repeat; background-size: contain;}
#sf-menu a :nth-child(1) span{opacity: 0;}

Mais je ne vois pas.

Edited June 12, 2019 by calypsoh (see edit history)

[R.Shredder]

Salut!

Attention, ton sf-menu est une classe, pas une div! donc : .sf-menu !

essaye plutôt :

 

ul.sf-menu li:first-child{background:url(/prestashop/img/Yachus-rosamel-transparent-35px.png) center no-repeat; background-size: contain;}

ul.sf-menu li:first-child{opacity: 0;}

Tiens moi au jus!

 

[calypsoh]

À oui merci de me rappeler la différence entre classe et div, je débute en CSS et je ne me souviens pas encore bien de certaines bases.

 

Sinon, je vois que ça fonctionne.

Cependant, si j'ai bien compris, la règle opacity fonctionne pour le contenu image et texte (?). Du coup à 0 l'image aussi est invisible.

Es-t-il possible de focaliser uniquement sur le texte ?

 

Pour mon info : Si je comprends bien la pseudo-classe first-child permet de cibler le premier élément du menu, pour cible la catégorie qui suit et les suivantes, je dois utiliser nth-child(2), ...nth-child(3)....nth-child(4) ?

Edited June 13, 2019 by calypsoh (see edit history)

[calypsoh]

Je viens de naviguer et je remarque que la règle ainsi écrite efface tous les premiers éléments de chaque catégories développées depuis le menu.

Comme tu peux le voir : http://prestashop-yachus.infotonome.fr/prestashop/

[Userprestashop86]

Vous devez remplacer

ul.sf-menu  li:first-child {
    opacity: 0
}

par

ul.sf-menu > li:first-child  > a{
    opacity: 0
}

Edited June 14, 2019 by Userprestashop86
erreur de frappe (see edit history)

[calypsoh]

Ça fonctionne parfaitement et en rajoutant le « > » sur la première ligne de code sinon ça se reporte aussi dans les menus développés.

Merci bien.

 

ul.sf-menu>li:first-child {
    background:url(/prestashop/img/Yachus-rosamel-78px.png) center no-repeat; background-size: auto;
}
ul.sf-menu>li:first-child>a {
    opacity: 0;
}

 

Edited June 25, 2019 by calypsoh (see edit history)