Hi,
I’ve adjusted the the width of my essential grid filter drop down and a few other tweaks, but I can’t for the life of me get the filter options to left align (so that all of the grey boxes are lined up and the text reads out from them).
I’ve tried adjusting the vertical margin and margin-left, but don’t see any changes.
This is the current CSS:
/********************************
- FLAT LIGHT BUTTONS -
*********************************/
.flat-light .navigationbuttons,
.flat-light .esg-pagination,
.flat-light .esg-filters{ text-transform:uppercase;
text-align: center;
}
.flat-light .esg-filterbutton,
.flat-light .esg-navigationbutton,
.flat-light .esg-sortbutton,
.flat-light .esg-cartbutton { color:#000;
margin-right:5px;
cursor:pointer;
position: relative;
z-index:2;
padding:1px 30px;
border:none;
line-height:38px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-size:12px;
font-weight:700;
font-family:“Open Sans”,sans-serif;
display: inline-block;
background: #fff;
margin-bottom:5px;
}
.flat-light .esg-navigationbutton { padding:2px 12px; }
.flat-light .esg-navigationbutton * { color:#000; }
.flat-light .esg-pagination-button:last-child { margin-right: 0; }
.flat-light .esg-sortbutton-wrapper,
.flat-light .esg-cartbutton-wrapper { display:inline-block; }
.flat-light .esg-sortbutton-order,
.flat-light .esg-cartbutton-order { display:inline-block;
vertical-align:top;
border:none;
width:40px;
line-height:40px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-size:12px;
font-weight:700;
color:#999;
cursor: pointer;
background:#eee;
background: #fff;
margin-left:5px;
}
.flat-light .esg-cartbutton { color:#fff;
cursor: default !important;
}
.flat-light .esg-cartbutton .esgicon-basket {
color:#fff;
font-size:15px;
line-height:15px;
margin-right:10px;
}
.flat-light .esg-cartbutton-wrapper { cursor: default !important; }
.flat-light .esg-sortbutton,
.flat-light .esg-cartbutton { display:inline-block;
position:relative;
cursor: pointer;
margin-right:0px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.flat-light .esg-navigationbutton:hover,
.flat-light .esg-filterbutton:hover,
.flat-light .esg-sortbutton:hover,
.flat-light .esg-sortbutton-order:hover,
.flat-light .esg-cartbutton-order:hover,
.flat-light .esg-filterbutton.selected {
border-color:none;color:#000;
background:#fff;
}
.flat-light .esg-navigationbutton:hover * { color:#333; }
.flat-light .esg-sortbutton-order.tp-desc:hover { color:#333; }
.flat-light .esg-filter-checked { padding:1px 3px;
color:#f2f2f2;
background:#f2f2f2;
margin-left:1px;
font-size:9px;
font-weight:300;
line-height:9px;
vertical-align: middle;
}
.flat-light .esg-filterbutton.selected .esg-filter-checked,
.flat-light .esg-filterbutton:hover .esg-filter-checked {
padding:1px 3px 1px 3px;
color:#fff;
background:#000;
margin-left:1px;
font-size:9px;
font-weight:300;
line-height:9px;
vertical-align: middle;
}
body .esg-dropdown-wrapper {
min-width: 300px;
}
body .esg-dropdown-wrapper .esg-filterbutton{
padding: 0 20px;
}
Can you please advise?
I was also wondering if there is a way to add subheadings into the filter menu? For example biotech, high-tech manufacturing & ICT are all types of Primary Sector. Is it possible to do something like in the mock up I’ve created here?
Thanks,
Ashley