Have a custom made Category Filter

[nicodergrieche]

Thank you Dylan

I’m ok with most of it.

The thing that still does not work is the thing with the scroll bar for the mobile version.
The given @media screen does not affect the way the filter is being displayed on my mobile device no matter what the (max-width: 750px) setting is (it does though have an effect on the way it is being displayed on my PC, where I can force the showing of the scroll bars, but I don’t want to 🙂

I also tried to make the label of a checked filter to be ‘bold’ but I didn’t manage.
Could you maybe help me on that?

This is what I’ve tried:

.wpgmza_checkbox {
position:absolute;
visibility:hidden;
opacity:0;
}
.wpgmza_cat_checkbox_item_holder input[type=checkbox] + label {
color: #000000;
font-style: normal;
background: #FFE7C6;
margin: 5px;
padding: 5px;
border-radius: 4px;
}
.wpgmza_cat_checkbox_item_holder input[type=checkbox] + label:hover {
background: #ffb547;
cursor: pointer;
}
.wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked + label {
background: #FF9A0C;
font-style: bold italic;
}

.wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked ~ label {
background: #FF9A0C;
font-style: bold;
color: #fffff00;
}

.wpgmza_cat_checkbox_item_holder {
display: flex;
}

@media only screen and (max-width: 795px) {
.ct-section-inner-wrap {
padding-left: unset;
padding-right: unset;

}
.wpgmza_cat_checkbox_item_holder input[type=checkbox] + label {
margin-right: 0px;
width: 100%;
margin-bottom: 5px;

}
.wpgmza_cat_checkbox_holder {
max-height: unset;
overflow: scroll;

}
.wpgmza_cat_checkbox_holder ul:first-child {
display: block;
}
}

.category-filter-icon {
width: 50px;
vertical-align: bottom;
margin-right: 0px;
margin-left: 10px;
}

.wpgmza_cat_checkbox_item_holder .wpgmza_checkbox {
display: none;
}

.wpgmza_cat_checkbox_item_holder label:nth-child(2) {
display: none;
}

.active_category {
border: red solid 2px;
}

@media screen and (max-width: 1000px){
.wpgmza_cat_checkbox_holder {
overflow-y: scroll !important;
overflow-x: hidden !important;
}
}

p[id^=”wpgmza_filter_”] {
display: none;
}

[Dylan]

Hi Nico,

Thank you for your continued time on this one.

I had a look at the site on a few devices and the filters do appear to be scrollable at the moment. With that said, some devices will not show the scrollbar until you start scrolling. This is managed by the device and not by CSS (the style of the scrollbars).

With regards to making the selected items bold, please add the following styles:

.wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked ~ label {
  font-weight: 800;
}

The value (800) can be changed to a smaller variation if preferred.

I hope this helps?

[nicodergrieche]

Hi Dylan

Thank you very much for the .css and for the info.
Funny that it font-style:bold would not do …..

Best regards

Nico

[Dylan]

Hi Nico,

Not a problem at all, happy to help wherever possible!

Have a nice day further!

🙂

[Author]

Posts