Hi Guys,
Would like to style the bar filter to be as follows:
1- Bar Font: White. Bar background: red
2- Drop down box arrow: White.
3- Drop down list: font:white
4- Drop down list: background; red
5- Border: no
Thank you
Hello @Alliance
It’s GemPages support team and glad to support you today.
I would like to give you a solution to support you:
-
Go to Online Store → Theme → Edit code:
-
Open your theme.liquid theme file
-
Paste the below code before :
Result:
Note: dropdown is displayed by browser or device, not suitable to change
Hope my solution can work and support you!
Kind & Best regards!
GemPages Support Team.
Hi @Alliance ,
Please add the below line of code at the end of your theme.scss file. let me know if you face any issues to add this.
body .filters-toolbar-wrapper .page-width{
color:#fff;
border:0;
background-color:#F40909;
}
body .filters-toolbar__input-wrapper.select-group select{
color:#fff;
}
body .filters-toolbar__input option{
color:#fff;
background-color:#F40909;
}
body .filters-toolbar .icon-chevron-down{
fill:#fff;
}
Hi,
Didn’t work for me. I even removed “Style” tag and put the code in theme.scss", didn’t work too.
Thank you
Sorry I got the wrong ID.
Please update the code again:
#shopify-section-collection-template .filters-toolbar-wrapper .page-width {
border: none;
background: red;
}
#shopify-section-collection-template .filters-toolbar-wrapper .page-width *{
color: white;
}
#shopify-section-collection-template .filters-toolbar-wrapper .page-width svg{
fill: white;
}
@Alliance , I have updated my CSS in the above post please paste that at the end of your scss file. That will solve the issue. The updated code is added below:
body .filters-toolbar__input-wrapper.select-group select{
color:#fff;
}
Hi,
This code worked perfectly.
body .filters-toolbar-wrapper .page-width{
color:#fff;
border:0;
background-color:#F40909;
}
body .filters-toolbar__input-wrapper.select-group select{
color:#fff;
}
body .filters-toolbar__input option{
color:#fff;
background-color:#F40909;
}
body .filters-toolbar .icon-chevron-down{
fill:#fff;
}
