Elementor Pro Portfolio Filter Bar Label

Elementor Pro – Portfolio Widget Filter Bar Label

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

Currently the Elementor Pro Portfolio Widget does not have a label option for the Filter Bar. This tutorial shows you how to create one. It also show how to add a hover effect for the filter bar items.

#my-port .elementor-portfolio__filters::before {
    content: "CLICK A CATEGORY TO SELECT THOSE POSTS \2192";
    background-color: #0080c0;
    color: #ffffff;
    padding-top: 17px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: 10px;
}

#my-port .elementor-portfolio__filters {
  display: flex;
    justify-content: left;
}

#my-port .elementor-portfolio__filters li:hover {
  color: #f2b230;
}

@media (max-width: 768px) {
  #my-port .elementor-portfolio__filters::before {
    	content: "CLICK A CATEGORY TO SELECT THOSE POSTS \2193";
    padding-bottom: 10px;
  }
}

Leave a Comment

Your email address will not be published. Required fields are marked *