[RÉGLÉ] intégration instagram qui passe par dessus ma headbar (et j'veux pas)

[elizabeth]

Bonsoir à toutes et tous,

j'espère que vous tenez le coup en ce moment...

j'ai un petit souci de z-index que je ne sais pas où mettre :
j'ai intégré dans une page un fil instagram, mais quand la fenêtre est un peu courte et qu'on descend l'ascenseur, le bloc instagram recouvre le headbar du site, et c'est moche.

en "examinant l'élément", je trouve que si je met le z-index de "element" (inline) à 100, c'est bon. Mais le style "element" dans ce cas (inline) est généré à la volée, non ?
Alors je ne sais pas où placer mon z-index à 100. J'ai essayé dans la class tm-headerbar-background, tm-headerbar-container, tm-headerbar, .. ?

Merci de votre aide,

Petite Fée

[lomart]

Bonsoir Elisabeth,

Tu peux essayer ceci :

div.tm-headerbar-background[style]{z-index=100 !important}

La magie (si elle fonctionne) consiste à indiquer que le sélecteur a un attribut style pour augmenter sa priorité. !important est peut-être de trop
Si ça ne marche pas, essaie de préciser encore plus le sélecteur en ajoutant uk-sticky, ...

[elizabeth]

Bonjour Lomart,

et merci de ton aide.
Je n'avais pas vu que tu m'avais répondu.
J'ai essayé d'ajouter :

div.tm-headerbar-background[style]{z-index=100 !important}

et

div.tm-headerbar-background[style]{z-index=100 }

et

div.tm-headerbar-background[style]{z-index=100; }

Concernant la précision en ajoutant uk-sticky, je ne suis pas assez à l'aise avec la syntaxe css pour savoir comment la rédiger
J'ai tenté :

div.tm-headerbar-background[style].uk-sticky{z-index=100;}
div.tm-headerbar-background[uk-sticky]{z-index=100;}
div.uk-sticky[style]{z-index=100}
div.uk-sticky{z-index=100}

Mais la magie n'a pas eu lieu...

[lomart]

Bonjour Elisabeth

Concernant la précision en ajoutant uk-sticky, je ne suis pas assez à l'aise avec la syntaxe css pour savoir comment la rédiger

C'est tout simple, il faut être plus précis dans le chemin

[COLOR=#c0392b]div.uk-sticky-placeholder [/COLOR]div.tm-headerbar-background[style]{z-index=100 !important}

on peut continuer comme cela jusqu'à body. Le principe est que plus un chemin est complet, plus il est prioritaire

[elizabeth]

Re,

c'est tout simple... Oui, quand on sait faire. Je préfère le php, c'est beaucoup plus simple à mon sens ;o) !!

Bon du coup j'ai tenté :

div.uk-sticky-placeholder div.tm-headerbar-background[style]{z-index=100 !important}

et

div.uk-sticky-placeholder div.tm-headerbar-background[style]{z-index=100}

sans succès.

J'attire ton attention, à toute fin utile, sur le fait que tous les autres éléments disparaissent bien sous la headbar. C'est uniquement le module instagram qui fait ce qu'il veut.
je ne sais pas si ça peut servir...

Et si tu as une autre idée ?

Merci encore,

E.

[lomart]

Sans accès au site, c'est plus compliqué
Tu peux m'envoyer l'URL en MP

[elizabeth]

Bonjour Lomart,
je t'ai envoyé le lien,
merci beaucoup,
E.

[lomart]

la sticky-bar se comporte bien. Le problème étant uniquement instagram, il faut baisser son z-index

#eapps-instagram-feed-1 {
z-index: 0;
}

En simulation avec l'inspecteur, ça fonctionne

[elizabeth]

ça marche !!!!!

merci beaucoup,

et j'espère à bientôt au JoomlaDay si un jour on peut se réunir à nouveau...