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/
Watch video Stylise the Parent Child Elementor Taxonomy Filter online without registration, duration hours minute second in high quality. This video was added by user Web Squadron 27 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 96 once and liked it 4 people.