Un peu de CSS pour fermer la Table des matières d’Elementor PRO
CET ARTICLE EST OBSOLÈTE – LA NOUVELLE VERSION DE CE WIDGET COMPORTE UN RÉGLAGE POUR DÉFINIR LE POINTS DE RUPTURE CSS QUI DÉFINI LA FERMETURE DE LA TABLE DES MATIÈRES
(voir le visuel plus bas)
La version 2.8 d’Elementor PRO à apporté le widget Table des matières. D’un utilisation simple et pratique il propose une option pour fermer la table des matières par défaut sur tablettes et mobile, par contre ce n’est pas possible sur ordinateur. Je vous propose une astuce CSS pour obtenir ce comportement par défaut sur les écrans de plus de 1024 pixels de large.
Pour obtenir le comportement fermé sur toutes les tailles d’écran il faut ajouter la règle media queries suivante :
@media only screen and (min-width:1024px) {
.elementor-toc--minimized-on-tablet .elementor-toc__body {
display: none;
}
Je reprend la règle de base du widget dans son comportement pour l’étendre au delà des 1024px de large. Vous pouvez aussi l’associer à une classe CSS à ajouter au widget pour ne l’appliquer qu’à une table des matières sur votre site.
Bonne utilisation.
Source : présentation du widget
3 réponses
Merci pour tips css, cela fonctionne parfaitement 🙂
Je l’utilise pour mon modèle d’article avec Elementor
Bonjour
J’ai essayé ce même code ça ne fonctionne pas de mon côté.
Salut, cet article est obsolète, le widget de table des matières comporte un réglages complet sur le point de rupture CSS à utiliser pour la refermer (selon les points de ruptures sélectionnés dans les réglages du site).