Return to previous page

Off Canvass Product Filters – Styling of the Icon, placement

This topic has 2 replies, 2 voices, and was last updated 1 years, 3 months ago ago by Rose Tyler

WebsiteDude

Participant

January 11, 2023 at 10:21

Hi Guys

I’m trying to style the Icon on the left and increase size of the overlapping icon. without success

I’d like to be able to control the colour etc like you can with the Right Hand Side hover menu you recently launced as part of the Sales Booster Feature

Can you sugges some code that helps change the size, colour etc. I thought this might work in the CSS but nothing. Also not sure which area of the CSS to place it.

I would also like it to open on page load and then close automatically

/* Side Filter Canvass */
.et-toggle.flex-inline
-webkit-box-align: center;
-webkit-box-pack: center;
align-items: center;
animation: 1s ease 0s 1 normal none running et-ltr, 0.7s ease 0s 1 normal none running fade;
backface-visibility: hidden;
background-color: #5e8886;
border-bottom: 2px solid #e1e1e1;
border-radius: 0px 50% 50% 0px;
border-right: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
box-sizing: border-box;
color: #ffffff;
display: flex;
font-family: Quicksand, sans-serif;
font-size: 18px;
font-weight: 300;
height: 60px;
justify-content: center;
line-height: 20px;
margin: 10px;
padding: 0px;
width: 60px;

Please, contact administrator
for this information.

#343640 Copied Theme version: 9.02 WooCommerce version: 7.2.2

1 Answer
Rose Tyler

Support staff

January 11, 2023 at 18:26
Hello,

Please try to use:
```
.et-toggle-mob-sidebars-wrapper .et-toggle-mob-sidebar .et_b-icon {
    font-size: 20px;
    color: #222;
    padding-left: 10px;
}
.et-toggle-mob-sidebars-wrapper .et-toggle-mob-sidebar .et_b-icon:hover {
    color: white;
}
```
Regards
#343734 Copied
Tagged: filter design, icon placement, icon styling, off canvass product filters, user experience, woocommerce wordpress themes
Viewing 2 results - 1 through 2 (of 2 total)