Stylise the Parent Child Elementor Taxonomy Filter
Stylise the Parent Child Elementor Taxonomy Filter
** Revision **
IMPORTANT - Inside of your Categories, you need to ensure that the Parent Cat contains the slug 'parent-xxx' and the Child Cat contains 'child-xxx'.
So if your Parent Title is 'Furniture' then the slug should be parent-furniture.
CSS:
/* Styling for 'All' button */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter="__all"] {
font-weight: 700;
color: #FFF;
border-style: solid;
background-color: #000;
}
/* Styling for Parent items */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter^="parent"] {
font-weight: 700;
color: #FFF;
margin-left: 30px;
background-color: #91A3B0;
}
/* Styling for Child items */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter^="child"] {
font-weight: 700;
color: #444444;
margin-left: 8px;
background-color: #DBE2E9;
}
/* Active state styling for Parent and Child items (not 'All') */
.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"]:not([data-filter="__all"]) {
background-color: #FF0050;
color: #FFF; /* Font color for active state */
}
/* Active state styling for 'All' button */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter="__all"][aria-pressed="true"] {
background-color: #000;
color: #FFF; /* Keep font color as white when 'All' is active */
}
👉 Grab our $1 Business Packs: https://learn.websquadron.co.uk/#packs
👉 WordPress Hosting: https://be.elementor.com/visit/?bta=2...
👉 The Pro Page Builder: https://be.elementor.com/visit/?bta=2...
Need 1-2-1 Support: https://learn.websquadron.co.uk/#support
Join our Facebook Group: / websquadron
Get Code Snippets Pro: https://r.freemius.com/10565/3304295/
