Keep Categories Expanded In Mobile

Site URL: http://katrichart.com/fineart

Hello,

I'm trying to keep the categories on my shop page expanded for mobile view. I'd like to hide the dropdown menu "Categories" but have the actual category options visible. I've attached a photo with an example of what I'd like to see on the mobile view.

I tried using this CSS but it hides the entire thing, not just the "Categories" dropdown menu.

@media screen and (max-width:640px) {
label.ProductList-filter-dropdownToggle-label {
    display: none;
}
}

Remove above code & Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
}

Thank you so much, this works great! I ended up combining the two so it stays expanded and hides the "Category".

I have a similar issue but we’re on 7.1. I would prefer for the categories on the “Shop” page to stack vertically instead of scrolling to the right to see more. The UI isn’t intuitive and most shoppers are not noticing that there are more categories in mobile view. See screenshot.

On 10/27/2021 at 12:17 AM, Latoya.burris said:

I have a similar issue but we’re on 7.1. I would prefer for the categories on the “Shop” page to stack vertically instead of scrolling to the right to see more. The UI isn’t intuitive and most shoppers are not noticing that there are more categories in mobile view. See screenshot.

Hi,

Add to Design > Custom CSS. If it doesn't work, please share link to store page on your site, we can check easier

@media screen and (max-width:767px) {
.products.collection-content-wrapper .nested-category-children {
    flex-wrap: wrap !important;
}
}